Bootstrap fixed size column

Question

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

I use bootstrap 2.3.2

_{(source: toile-libre.org)}

Right column will not be resized at all screen size.

Answer 1

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>