These days, web design is dictated by HTML and CSS coding. Gone (mostly) are the days of table-based layouts. Now we use "divs", and apply characteristics to each div in CSS.
I usually don't set <div> heights in my CSS. I find that it just causes problems later in the design, usually conflicting with browsers or later code.
But multi-columned layouts have a problem:
If your layout has three or more columns, the columns will all be different heights, depending on the length of the contained content.
And that gets ugly.
There are a couple of different ways to fix that, but in this article I'm going to discuss a CSS and JavaScript method.
Your CSS might look like this,
body {
margin: 0;
}
#leftcol {
background: #000eee;
float: left;
width: 17%;
}
#content {
width: 65%;
float: left;
background: #000;
}
#rightcol {
float: right;
width: 17%;
background: #22ee00;
}
with this HTML:
<html>
<head>
<title>Some Title Here</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="leftcol">
Left Column
Content goes here...
</div>
<div id="rightcol">
Right Column
Content goes here...
</div>
<div id="content">
Center Column
Content goes here...
</div>
</body>
</html>
As you can see, the div titled "leftcol" is floated to the left, "rightcol" is floated to the right, and the center "content" div has been floated left to stay in between the two columns. Each div has been given a width as a percentage, which is used for fluid layouts, but for fixed layouts you can use pixels.
So whats the problem?
Right now, all three divs have exactly the same amount of content, so they will be the same height.
But it's unlikely this will be the case on an actual site. There will be different amounts of content in each column, and your site will end up looking like this:
When it should look more like this:
So how to keep the columns at equal lengths?