Boot fluid layout - fixed side panel width

Question

I have a fluid layout based on 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 a fixed-width sidebar. if you change the layout from fluid to “static” and set the width of the sidebar to

 220px 

and I resize the window or change my resolution to 1024 ... the contents of the body jump under the sidebar. how can i avoid this?

EDIT: Got it. Later he will publish my "decision". thank you for your responses

Answer 1

I think you are looking at 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 is the fiddle for your convenience: http://jsfiddle.net/TT8uV/2/

As a general remark:

You do not need to use bootstrap as the main container, so you can place your sidebar side by side with a mesh (for example, bootstrap fluid and responsiveness). That way you have an A LOT sidebar control without affecting the actual content.

Hope this works for you.

Answer 2

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