Fixed position sidebar according to viewport (fluid layout)

Question

In a CSS fluid layout all divs use percentages. However, I need my sidebar to have a fixed position.

Example:

<aside style="width:25%; float:left; position:fixed;">
    aside content
</aside>
<div style="width:75%; float:left;">
    main content    
</div>

What I'm really trying to do is to make the sidebar keep a specific width according to the viewport. For example I need it to be 300px wide if the viewport is between 1000 and 1200 px wide.

An alternative: I also want it to be 300px wide when its parent div (I know I din't mention a parent div in the example above) is larger than say 1000px.

I guess it takes some JS to do it but I'm a complete idiot when it comes to JS so your help would be much appreciated. Thank you.

score 0 · Answer 1 · answered Dec 20 '12 at 14:41

0

try:

@media only screen and (max-device-width: 1024px) { div#sidebar { width: 300px; }}

answered Dec 20 '12 at 14:41

Toping

754
5
16

score 0 · Answer 2 · edited Sep 27 '15 at 09:57

0

Try a CSS media query

Example

@media all and (min-width:1000px) and  (max-width:1200px)
{
  // css 
}

@media all and (min-width:300px) and (max-width:1000px)
{
   // css 
}

edited Sep 27 '15 at 09:57

marc_s

732,580
175
1,330
1,459

answered Dec 20 '12 at 14:55

GajendraSinghParihar

9,051
11
36
64

score 0 · Answer 3 · edited May 23 '17 at 11:58

looks like duplicate of : Bootstrap fluid layout - fixed width of sidebar

My answer there :

I think you are looking something like this:

<div class="sidebar span4">
    this is my fixed sidebar
</div>
<div class="main">
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span2">this is fluid</div>
            <div class="span3 offset1">yeah!</div>
            <div class="span6">Awesome!</div>
        </div>
        <div class="row-fluid">
            <div class="span6">1 half</div>
            <div class="span6">2 half</div>
        </div>
    </div>
</div>

here´s a fiddle for your convenience: http://jsfiddle.net/TT8uV/2/

As as general note:

You don´t need to use bootstrap as your 'main container', so you can place your sidebar side-by-side with a grid system (like bootstrap fluid and responsive). This way you have A LOT of control of the sidebar, without affecting the actual content.

Hope it works for you.

Fixed position sidebar according to viewport (fluid layout)

3 Answers3