As I’ve stated on here before, nothing drives me crazier than seeing people using tables for website layouts when CSS is better and easier when you know what to do. One thing I had trouble with when I was just starting out was a two column layout with the left column matching the height of the right column. Eventually I figured it out and it’s a lot easier than you think. Remember, there’s always more than one way to do things, but this is the simplest way I’ve found to do this.
First thing we need is out HTML:
Nothing major, we just have a container div and the two column divs. The first thing you might notice is that the right column is above the left column, I do this because it allows me to position the two columns with only a couple of lines of CSS.
Here’s our CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | #container { width:1000px; margin:auto; background:gray; position:relative; } #right_column { width:700px; margin-left:300px; background:black; min-height:500px; } #left_column { width:300px; position:absolute; top:0; } |
All I’m doing here is setting the right column’s left margin to equal the width of the left column and then setting the left column’s position to absolute and it’s top position to zero. This moves it up and into the position we want. The main problem I always had was getting the left column to stretch to the height of the right column which is usually a big deal if they both have different background colors. I’ve solved that problem here by not giving the left column a background color and giving the color I’d want the left column to have to the container div. Now when the right column stretches, it will stretch the container div and it will look like the left column is stretching with it.
This works in all the modern browsers and it’s what I use here on my blog. I don’t know if it works in IE6 because I don’t really care.