Bootstrap fixed size column

My basic solution below (see it in action here). I've padded out the CSS to demonstrate the blocks with colours, but all you really need to do is as follows:

Fixed element

  • Set it to float:right
  • Apply a fixed width to it

Fluid row element

  • Apply padding/margin-right equal to the width of the fixed element
  • Apply box-sizing:border-box, so that the 100% width against the .row-fluid element persists, but the margin/padding added doesn't push it out further. The markup below shows the minimum you'll need.

CSS

#fixed-width { 
    width:100px;
    float:right;
}
#fluid.row-fluid {
    margin-right:100px;
    -webkit-box-sizing:border-box;
       -moz-box-sizing:border-box;
            box-sizing:border-box;    
}

HTML

<div class="clearfix">
    <div id="fixed-width">Content...</div>
    <div id="fluid" class="row-fluid">
        <div class="span4">a</div>
        <div class="span4">b</div>
        <div class="span4">c</div>
    </div>
</div>