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

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.

Answer 2

So you basically want the right column to fit the available space.
You have 5 options that are not specific to bootstrap but general HTML/CSS:
1) use calc
.left-col {
width: 200px;
}
.right-col {
width: calc(100% - 200px);
}
That obviously excludes IE8 and other browsers that do not support calc.
2) use float
I didn't think of that one. Check #henser's answer for that. Seems to work pretty good although I was under the impression that the right-col would break down if there isn't enough available space for it's content. Apparently I was wrong - this seems to be the best method if you want to support older browsers.
3) use flexbox
That is a bit more work and maybe complicated but I can recommend this great guide to get started with flexbox.
That obviously excludes old IE versions as well.
4) use tables
Ugly, not really recommended but it supports all browsers.
5) Javascript
you can use JavaScript to calculate the remaining space. But that of course needs to be fired on resize. Not recommended as it's not as fast as the other options.
// jQuery example
$('.right-col').width($(window).width() - $('.left-col').width());