written by: Finn Orfano•edited by: Robin L.•updated: 5/24/2011
slide 1 of 4
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.
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?
slide 3 of 4
So add a class called .container to the CSS, and add the container class to each of your columns in the HTML. You can style the class or leave it empty.
// get all <div> elements in the document
// initialize maximum height value
// iterate over all <div> elements in the document
// make collection with <div> elements with class attribute 'container'
// determine height for <div> element
// calculate maximum height
// assign maximum height value to all of container <div> elements
// execute function when page loads
The maxHeight variable grabs the maximum height for those divs. You don't have to specify this anywhere, it just calculates the height of each div and grabs the height of the tallest column.
slide 4 of 4