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

2

8

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/

Danettedaney answered 30/9, 2014 at 22:19 Comment(0)
I
10

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.

Insecurity answered 7/10, 2014 at 8:46 Comment(2)
If you like dynamic height you need no height declaration or padding if you use overflow: hidden; for the right column. See this fiddleIncorrect
ahh there is also a simple method. Great answer. I included it in my list with a link to your answer. +1.Lyricism
L
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());
Lyricism answered 7/10, 2014 at 8:26 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.