8

I'm trying to make a 2 column design (using Twitter Bootstrap) with 2 columns of equal height.

Let's take this example:

<div class="row-fluid">
    <div class="span2">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
        </ul>
    </div>

    <div class="span10">
        test
    </div>
</div>

​ Because .span2 is the highest of the two columns, it makes .row-fluid stretch to accommodate its height. After reading this article, I was expecting that setting min-height: 100% on .span10 would make it stretch to the full height, but it doesn't:

Screenshot

http://jsfiddle.net/WTNeB/1/

Why is that? Any solution to make .span10 stretch to its parent height, avoiding setting a fixed height, to keep this design flexible?

BenMorel
  • 34,448
  • 50
  • 182
  • 322

2 Answers2

11

Try this:

http://jsfiddle.net/WTNeB/2/

notice that i added display:table and display:table-cell but also I changed the css selector names so that it gets the priority needed.

.row-fluid {
    border: 1px dotted gray;
    display: table;
}
.row-fluid .span2 {
    border: 1px solid blue;
    display: table-cell;
    float: none;
}
.row-fluid .span10 {
    min-height: 100%;
    border: 1px solid red;
    height: 100%;
    display: table-cell;
    float: none;
}
samura
  • 4,375
  • 1
  • 19
  • 26
  • That works indeed, even without `min-height`, as it would on real table cells. I've never felt comfortable with `display: table-cell` though, is that reliable (cross-browser with good support, ...) nowadays? – BenMorel Sep 11 '12 at 18:38
  • It won't work for IE7. You could always [use javascript](http://stackoverflow.com/questions/9143971/using-twitter-bootstrap-2-0-how-to-make-equal-column-heights), or try [any of these solutions](http://css-tricks.com/fluid-width-equal-height-columns/). – crowjonah Sep 11 '12 at 18:39
  • 1
    Display a javascript alert saying "Please update your browser or switch to a better one." – samura Sep 11 '12 at 18:45
  • @samura Telling people to update/switch browsers is just plain rude and obnoxious (do you know how often I see it when my browser of choice is Opera?). Give old browsers/IE a graceful fallback and keep your opinions on what browsers your visitors should be using to yourself. – cimmanon Sep 11 '12 at 19:05
  • @cimmanon sorry was just a joke. never intended to offend anyone. Although I wish people would keep browsers updated, never forced it on any of my client's websites. – samura Sep 11 '12 at 19:23
  • In the mentioned jsfiddle, how to make either of the 'spans' align centrally so that if the contents in either of the cells is more than the other, then the content in the 'other' cell is suitably aligns itself to the middle of the cell. – sprezzatura Mar 29 '13 at 13:32
0

And old classic is the faux columns technique. Works flawlessly in every browser and is easy to implement.

One downside however: You need to add a background image (and thus one more request, unless you're base 64 encoding your background).

Setting height/min-height to 100% is not possible on block level elements that have "auto height".

Arve Systad
  • 5,471
  • 1
  • 32
  • 58
  • "It’s important to note that if borders, padding and margins are desired on either column, then we must still make up for IE/Win’s botching of the box model with Tantek Çelik’s Box Model Hack or Mid Pass Filter." This example has borders. – samura Sep 11 '12 at 19:25
  • It still works perfectly fine. Borders running vertically is solved "by default" with this technique. Horizontal borders that either flows with the content or has fixed positions can be treated as is. Use this technique, and add your boxes "on top" - it's really easy. I've used it myself for countless designs throughout the years and its a real no brainer when you get used to it. – Arve Systad Sep 26 '12 at 22:04