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>