On a two-column page, how can I grow the left div to the same height of the right div using CSS or Javascript?

Question

I'm trying to make a two-column page using a div-based layout (no tables please!). Problem is, I can't grow the left div to match the height of the right one. My right div typically has a lot of content.

Here's a paired down example of my template to illustrate the problem.

<div style="float:left; width: 150px; border: 1px solid;">
  <ul>
    <li>nav1</li>
    <li>nav2</li>
    <li>nav3</li>
    <li>nav4</li>
  </ul>
</div>
<div style="float:left; width: 250px">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
....
</div>

Answer 1

Your simplest answer lies in the next version of css (3), which currently no browser supports.

For now you are relegated to calculating heights in javascript and setting them on the left side.

If the navigation is so important to be positioned in such a way, run it along the top.

you could also do a visual trick by moving the borders to the container and the bigger inner, and make it appear to be the same size.

this makes it look the same, but it isn't.

<div style="border-left:solid 1px black;border-bottom:solid 1px black;">
  <div style="float:left; width: 150px; border-top: 1px solid;">
    <ul>
     <li>nav1</li>
     <li>nav2</li>
     <li>nav3</li>
     <li>nav4</li>
    </ul>
 </div>
 <div style="float:left; width: 250px; border:solid 1px black;border-bottom:0;">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  ...
 </div>
 <div style="clear:both;" ></div>
</div>

Answer 2

It can be done in CSS! Don't let people tell you otherwise.

The easiest, most pain-free way to do it is to use the Faux Columns method.

However, if that solution doesn't work for you, you'll want to read up on this technique. But be warned, this is the kind of CSS hackery that will make you wake up in a cold sweat in the middle of the night.

The gist of it is that you assign a large amount of padding to the bottom of the column, and a negative margin of the same size. Then you place your columns in a container that has overflow: hidden set. More or less the padding/margin values allow the box to keep expanding until it reaches the end of the wrapper (which is determined by the column with the most content), and any extra space generated by the padding is cut off as overflow. It doesn't make much sense, I know...

<div id="wrapper">
  <div id="col1">Content</div>
  <div id="col2">Longer Content</div>
</div>

#wrapper {
  overflow: hidden;
}

#col1, #col2 {
  padding-bottom: 9999px;
  margin-bottom: -9999px;
}

Be sure to read the entire article I linked to, there are a number of caveats and other implementation issues. It's not a pretty technique, but it works fairly well.

Answer 3

You can do it in jQuery really simple, but I am not sure JS should be used for such things. The best way is to do it with pure css.

1. Take a look at faux columns or even Fluid Faux Columns

2. Also another technique(doesn't work on the beautiful IE6) is to position:relative the parent container. The child container(the nav list in your case) should be positioned absolute and forced to occupy the whole space with 'top:0; bottom:0;'