Search code examples
csstwitter-bootstrapresponsive-designfluid-layouttwitter-bootstrap-2

Fixed width sidebar with responsive main div in bootstrap 2.3.2


Im trying to get a fixed width side bar with a responsive main div when using bootstrap 2.3.2.

Something like this image below

fixed sidebar, fluid main div

Ived tried to use a 200px fixed width div and then place a fluid div next to it, but couldnt get it to work. Any ideas ? ive made a js fiddle of the problem here - http://jsfiddle.net/KAfMB/1/


Solution

  • This is because your "fixed-span" class is being overridden by the bootstrap span classes. You can solve this removing the word "span" from your class:

    <div class="row-fluid">
        <div class="fixed blue cols">...</div>
        <div class="span8 red cols">...</div>
    </div>
    
    .fixed {
        width:200px;
        float: left;
    }
    

    Here's the fiddle: http://jsfiddle.net/KAfMB/4/