11

i have a fluid layout based of twitters bootstrap.

<div class="container-fluid">
    <div class="row-fluid">
       <div class="span2">
           <!--Sidebar content-->
       </div>
       <div class="span10">
           <!--Body content-->
       </div>
    </div>
</div>

It would be very nice to have the sidebar a fixed width. if a change the layout from fluid to "static" and set the width of sidebar to 

220px

and i resize the window or change my resolution to 1024... the body-content jumps under the sidebar. how can i avoid this?

EDIT: Got it. Will post my "solution" later on. thanks for your responses

Jens
  • 345
  • 1
  • 6
  • 19
  • Can you put up a test case using something like [jsfiddle](http://jsfiddle.net)? Can't quite understand the effect you're looking for here. – Andres I Perez Mar 06 '12 at 19:04
  • 14
    So... what was this famous "solution" of yours? :) – R Thiede Mar 20 '12 at 09:58
  • Yes, post your solution, I'm also interested, fixed width sidebar with the rest of page fluid... I can't accomplish that – Jorge Sampayo Oct 31 '12 at 16:15
  • 1
    Here's a solution: http://ekdhl.net/blog/2012/10/19/fixed-width-static-sidebar-with-twitter-bootstrap-fluid-layout/ – C. E. Nov 07 '12 at 18:14
  • 2
    "I have found a truly remarkable solution to this problem, but I can't fit it in a stackoverflow comment." --Jens. ;) – aquinas May 21 '13 at 15:04

2 Answers2

31

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.

Bart Calixto
  • 19,210
  • 11
  • 78
  • 114
  • 4
    This is the only answer that solved the fixed width. The others are about fixed position. +1 – roeland Mar 30 '13 at 19:17
  • 1
    I appreciate this attempt, but the problem is, the second row in the right hand main floats lower than the bottom of the right-hand sidebar. Notice how '1 half' and '2 half' (which are spans in the second row-fluid in the main nav) float below it: http://jsfiddle.net/TT8uV/2/show/ – Nicholas Petersen Apr 24 '13 at 17:50
  • 2
    I don't think this has to be with the solution, but either way I update with an overflow:auto to the row here: http://jsfiddle.net/TT8uV/35/ or you can postion:absolute the sidebar http://jsfiddle.net/TT8uV/36/ – Bart Calixto Apr 25 '13 at 16:11
  • This is the proper solution - you don't need to use the Bootstrap grid for everything. Having a separate sidebar is the best. Please accept this answer! – VladFr Nov 04 '16 at 16:28
8

I think this is what you need: http://jsfiddle.net/U8HGz/1/

Yiannis Gkoufas
  • 660
  • 6
  • 16
  • nope, because the sidebar is fixed in position. my right row/container has a width of mh approx 3000-4000px. so if i scroll right the sidebar is always on top. but thanks for your response – Jens Mar 07 '12 at 14:56