How to build a 2 Column (Fixed - Fluid) Layout with Twitter Bootstrap?

Answer

It is possible to implement a fixed-fluid structure using the CSS found below and slightly modified HTML code taken from the Twitter Bootstrap documentation page:

HTML

<divclass="container-fluid fill"><divclass="row-fluid"><divclass="fixed"><!-- we want this div to be fixed width -->
            ...
        </div><divclass="hero-unit filler"><!-- we have removed spanX class -->
            ...
        </div></div></div>

CSS

/* CSS for fixed-fluid layout */.fixed{
    width:150px;/* the fixed width required */float: left;}.fixed+ div {
     margin-left:150px;/* must match the fixed width in the .fixed class */
     overflow: hidden;}/* CSS to ensure sidebar and content are same height (optional) */

html, body {
    height:100%;}.fill { 
    min-height:100%;
    position: relative;}.filler:after{
    background-color:inherit;
    bottom:0;
    content:"";
    height:auto;
    min-height:100%;
    left:0;
    margin:inherit;
    right:0;
    position: absolute;
    top:0;
    width: inherit;
    z-index:-1;}

To ensure that the main content fills at least 100% of the screen height, we need to set the height of the html and body to 100% and create a new css class called .fill which has a minimum-height of 100%:

html, body {
    height:100%;}.fill { 
    min-height:100%;}

We can then add the .fill class to any element that we need to take up 100% of the sceen height. In this case we add it to the first div:

<divclass="container-fluid fill">
    ...
</div>

To ensure that the Sidebar and the Content columns have the same height is very difficult and unnecessary. Instead we can use the ::after pseudo selector to add a filler element that will give the illusion that the two columns have the same height:

.filler::after {
    background-color: inherit;
    bottom:0;
    content:"";
    right:0;
    position: absolute;
    top:0;
    width: inherit;
    z-index:-1;}

To make sure that the .filler element is positioned relatively to the .fill element we need to add position: relative to .fill:

.fill { 
    min-height:100%;
    position: relative;}

And finally add the .filler style to the HTML:

HTML

<divclass="container-fluid fill"><divclass="row-fluid"><divclass="span3">
            ...
        </div><divclass="span9 hero-unit filler">
            ...
        </div></div></div>