Is it possible to have a hybrid fluid/non-fluid grid system?

Question

Using bootstrap 2, what would be the simplest method of having a static width column on the left and have the right column be fluid. Something like this with 200 px width left column and the right to fill the browser window.

======================
Hello
======================
 A   |
 B   |      100%
200px|
 D   |
 E   |
 F   |

I tried adding a min-width to a regular container layout but it have some weird behavior when resizing:

<div class="container-fluid">

    <div class="row-fluid">
        <div class="span12">Hello</div>
    </div>

    <div class="row-fluid">
        <div class="span2" style="min-width:200px">Left Column</div>
        <div class="span10">Right Column</div>
    </div>

</div>

Here is a JS fiddle as well though the quad layout of js fiddle itself seems to be adding its own behavior.

http://jsfiddle.net/BVmUL/882/

Answer 1

Short answer to your question is NO. Bootstrap 2 uses media queries and percentual measures to achieve their responsive grid layouts. Trying to make an hybrid approach using Bootstrap 2 is completely redundant.

You can try this approach. Use float:left; on the left column and give a padding-left:200px; to the right column and that's it. You've drawn your layout. Added clearfix at the bottom so you can use a footer in the future if you like. This way you keep support for most browsers.

Check JsFiddle Demo

HTML

<div class="container-fluid">

    <div class="row-fluid">
        <div class="span12 header">Hello</div>
    </div>

    <div class="row-fluid">
        <div class="span2 left-col">Left Left Left Left Left Left Left</div>
        <div class="span10 right-col">Right Right Right Right Right Right Right </div>
    </div>

</div>
   <div class="clearfix"></div>

CSS

.header{
    background-color:#f00;
}
.left-col{
    background-color:#0f0;
    float:left;
    width:200px;
    height:400px;
}
.right-col{
    background-color:#00f;
    height:400px;
    padding-left:200px;
}

After that you can use Javascript to dynamically adjust the left column width and the right column padding on window resize.

You may also want to consider the following alternatives:

1. Calc() (IE9+ only)

If you don't care about IE8- support this is the easiest way to achieve it. You can learn how here

2. Media Queries (IE9+ only)

You can use Media Queries just like Bootstrap does but you can't use percentual measures to achieve what you're looking for. You can use it to change css property values and make it responsive (with your custom limitations) that way.

3. Flexbox (IE10+ only (partial IE9))

Will be great but not recommended for now because of browser support.

4. Tables

Take this thread to know why you shouldn't use it.