There seems to be about four or five different methods, but I'm just wondering if anyone has any insight into best practices. I'm not averse to using Javascript, and pure-CSS solutions are awesome, but only if they're not totally unwieldy. On my particular site, I'd like the left sidebar (#secondary) to be the same height as the content (#container). Both are contained inside of #main.

11 answers

7
points

My preferred method for equal height columns in CSS is to apply bottom padding of a large amount, bottom negative margin of the same amount and surrounding the columns with a div that has overflow hidden.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <style type="text/css">
    #main {
      overflow: hidden;
      width: 100%; /* to give layout to IE */
    }
    #secondary {
      float: left;
      width: 30%;
      background-color: orange;
      padding-bottom: 500em;
      margin-bottom: -500em;
    }
    #container {
      float: right;
      width: 60%;
      background-color: red;
      padding-bottom: 500em;
      margin-bottom: -500em;
    }
</style>
</head>
<body>
  <div id="main">

    <div id="secondary">
      <p>Test content</p>
      <p>longer</p>
    </div>

    <div id="container">
      <p>Test content</p>
    </div>

  </div>
</body>

If you use overflow hidden on the parent this clears the floats in all non-IE browsers and then just adding something to give hasLayout such as width or zoom:1 will cause IE to clear its internal floats.

I have tested this in all modern browsers FF3+ Opera9+ Chrome Safari 3+ and IE6/7/8, It may seam an ugly trick but it works well and I use it in production a lot.

I hope this helps

Kind regards, Natalie

Answered about 8 years ago by Natalie Downe
0
points

Ah, I should have chosen a better page as an example. This about page that's set up as the screenshot is too short, but some of the longer pages go beyond the sidebar, and then it's just hanging. Anyway, I found a solution that works (the negative margin one is great for a single page, but this is a wordpress install with pages of varying heights) over at CSS Newbie. Works well, and I wager the few people that don't have JS installed won't mind if the sidebar is a bit short. Thanks for the answers guys, and thanks for the great explanation Natalie!

Answered about 8 years ago by Jeff Byrnes
Alex G 0
0
points

It depends. If the content of either column is dynamic or of unpredictable height, then equalising the heights dynamically might be the answer - a handy jQuery plugin exists: http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/

Otherwise I second (third, fourth?) @natalie's solution.

Answered about 8 years ago by Alex G
0
points

One solution that we have used is to set the columns to "min-height: 100%" and "height:100%" (for IE6). Then using JavaScript calculate the height of #main and set it inline using JavaScript. #main will end up always being the height of the tallest column and once that height is set inline, the rest of the columns will be just as tall because of the 100%. There is no perfect solution and like "Jens" said the solution you end up choosing should be based on your needs.

Answered about 8 years ago by Efficient Pixel
0
points

Dan Rubin posted a great article on equal height absolute columns on the latest series of the 24ways.org articles.

As you can see by the answers, there are enough methods to achieve good results. Which one to use ultimately depends on the project.

Answered about 8 years ago by Jesse Vlasveld
0
points

I usually tend to give the surrounding div an overflow:hidden; and then for the equal height div; padding-bottom:1000px and margin-bottom:-1000px;

Answered about 8 years ago by VagrantRadio
UnDash 23
0
points

The easiest fix would probably be to apply a background image to the main container and repeating it vertically. But as you say, there is more than one solution to the problem!

Answered about 8 years ago by UnDash
0
points

Choose your solution based on needs. If it's a pure aestethic issue than faux columns with CSS backgrounds could be a good choice.

Sometimes you can absolutely position a section with top: 0 and bottom: 0 values but that unfortunately removes them from the flow.

On your current site it doesn't matter because #container's end/bottom doesn't show anyway being white (?).

Answered about 8 years ago by Jens Hedqvist
0
points

I had the same problem about a year ago or so, and typed up this example of what I found to be the best solution. Maybe you'll find it useful.

http://code.g81.dk/css-column/

Basically you set overflow: hidden on the container, and then something like #sidebar { padding-bottom: 999em; margin-bottom: -999em; } but have a look. :-)

Answered about 8 years ago by Casperin
-1
points

Using a table is an option, but I suggest you should think about it first. If its purely aesthetic, I suggest using a repeating background image instead to create the illusion.

Hope you share your thoughts and the outcome of your decision.

I recommend @natalie's suggestion :)

Answered about 8 years ago by voidnothings
Jakob 17
-2
points

Well i tried it with FF3, IE6, IE7 and height: 100%; seams to work pretty well, so you may try it that way

to get -2 points for this is kind of unfair only because you can't figure out that a wrapper is needed and the percentage of 2 wrapped columns base on a relative position will resize the "columns", which i intend are divs, to the same size. .... well next time you get a code example for beginners.

Answered about 8 years ago by Jakob