Bootstrap fixed size column

korvinko picture korvinko · Jul 30, 2013 · Viewed 15.6k times · Source

I need to do fixed width right column column in bootstrap, but left column will be responsive.

I use bootstrap 2.3.2

enter image description here
(source: toile-libre.org)

Right column will not be resized at all screen size.

Answer

Ian Clark picture Ian Clark · Jul 30, 2013

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>