Make two columns the same height

Question

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?

samura · Accepted Answer · 2012-09-11 18:36:18Z

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; }

answered Sep 11, 2012 at 18:36

samura

4,4051 gold badge23 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

BenMorel Over a year ago

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?

crowjonah Over a year ago

It won't work for IE7. You could always use javascript, or try any of these solutions.

samura Over a year ago

Display a javascript alert saying "Please update your browser or switch to a better one."

cimmanon Over a year ago

@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.

samura Over a year ago

@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.

|

Arve Systad · Accepted Answer · 2012-09-11 19:00:10Z

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".

answered Sep 11, 2012 at 19:00

Arve Systad

5,5291 gold badge35 silver badges59 bronze badges

2 Comments

samura Over a year ago

"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.

Arve Systad Over a year ago

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.

Collectives™ on Stack Overflow

Make two columns the same height

2 Answers 2

6 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Linked

Related