It’s not that complicated.
In most cases, a real simple CSS strategy will take care of this. The code is clean, simple, and easy to manage. The code below gives you what you need:
<html> <body> <div style="position: relative; width: 400px; background-color: #FFFF00;"> <div style="float: left; width: 100px; background-color: #0000FF;">a<br />a</div> <div style="float: left; width: 300px; background-color: #00FF00;">a</div> <div style="clear: both;"></div> </div> </body> </html>
Basically what we’re doing is putting the left and right column (or however many you want) inside one large DIV tag that will hold everything. This large DIV will adjust to the height of the tallest DIV inside it.
I’ve placed these DIVs inside using float left (but feel free to use relative position instead). I create one DIV for each column and adjusted the width accordingly. Since I’m using float, I’m adding one more DIV at the bottom and giving it a clear both value. What this will do is stay underneath all the other DIVs I’ve created, forcing the larger containing DIV to take the height of the tallest DIV.
The explanation might sound complicated, but it among the best solutions for this problem, and the most versatile.
To customize this, simply change the values in the style tag to what you need them to be. This code is simple, valid, and clean. Best of all, it works well in virtually all environments.
Adding a Background
You might have noticed that the above example is a bit bland. It works, but probably will not fit the purposes you need. Chances are you’re creating something like a two-column layout with a sidebar and main content area. However, you’ll want their backgrounds to extend to the bottom of the page.
The solution for this is simple as well. All we need to do is add a background image to the main containing DIV. This background will give the illusion of two separate columns.
<html> <body> <div style="position: relative; width: 400px; background-image: url('background.gif');"> <div style="float: left; width: 100px;">Line 1<br />Line 2<br />Line 3</div> <div style="float: left; width: 300px;">Content</div> <div style="clear: both;"></div> </div> </body> </html>
The above code uses a background image on the containing DIV and does not use background colors of the inner DIVs. I only added those colors to illustrate their positions. the above code will look something like this:
You can also download the source code here: creating_a_web_page_with_equal_column_heights.