First time visitor? The tutorials start here.

CSS: Putting Equal-Height Columns to Practical Use

If you haven’t gone through Equal Height Columns with CSS yet, you should do so before reading any further. This tutorial will continue from there, and I’ll show you a way to add content under those columns in a way that works with all the most popular browsers, as well as the dreaded IE6 that many people are still using.

Add a container div

I like to add a container div to all of my pages, regardless of whether I am creating equal height columns or not, because it lets you control the width of the entire layout with one easy declaration.

In this case, it will contain the column wrapper and the three columns within it, as well as the main heading and the footer.

In your “columns.htm” file, immediately after the <body> tag, add this:

<div id="container">

Then, immediately before </body>, add:

</div><!-- end container -->

In “columns.css,” add:

#container {
	width: 90%;
	margin: 0 auto;
	border: 1px solid #000;
}

Make sure you’ve saved your changes in both files, then view columns.htm in your browser. The border isn’t really necessary for the layout, but it will help you see where the container is when you view the page.

In IE6 and IE7, the border surrounds all of the columns, leaving a line of white-space between the bottom border and columns. In all standards-compliant browsers, the border doesn’t enclose the columns at all, because the columns and column wrapper are all floated, without anything to clear that float.

This will be fixed when we add content under the columns. In this case, we’ll add a page footer and tell it to clear the floated columns.

After the end of the column wrapper, and before the end of the container, add a div with the ID of "footer" and put some text inside that div. It should look something like this:

</div><!-- end column wrapper -->
<div id="footer">
Footer
</div><!-- end footer -->
</div><!-- end container -->

Then in your CSS file, add:

#footer { 
	clear: both;
	background: #999;
}

Here, we cleared the floated columns and gave it a background color so we can see what it’s doing. Make sure you saved both files, then refresh columns.htm in your browser.

This works perfectly in every browser I’ve tested it on… except for IE6. In IE6, the columns will extend to the bottom of any content that’s placed below them, covering up all of that content.

While many website developers are rebelling and ignoring IE6 at this point, the cold reality is that a lot of people still use it, so if you want them to view your site as intended, there are still a few issues for us to get around.

An easy solution

It’s simple. Layer them with z-index. But, in order to use z-index, you have to give that element a position of “absolute” or “relative.” For our purposes, “relative” is what we need.

In your CSS, add the parts in bold:

#column_wrapper {
	overflow: hidden;
	position: relative;
	z-index: 5;
}
#footer { 
	clear: both;
	background: #999;
	position: relative;
	z-index: 10;
}

The exact numbers you use for z-indexing doesn’t matter, as long as #column_wrapper has a smaller number than #footer, so it can be placed behind the footer.

Widening the columns

Now that we’ve taken care of the length of the columns and adding content below them, we still need to adjust the width of the columns. This is easy. Just pick 3 numbers that all add up to 100, then put those widths in % sizes.

Where you have this in your CSS:

#column1 {
   background: #f99;
}
#column2 {
   background: #ccc;
}
#column3 {
   background: #99f;
}

Add your widths. You can use any widths you want, as long as the three numbers add up to 100.

#column1 {
   background: #f99;
   width: 25%;
}
#column2 {
   background: #ccc;
   width: 40%;
}
#column3 {
   background: #99f;
   width: 35%;
}

Padding the columns

If you try padding the columns so the text isn’t right up to the edge of them, this will make the columns too wide, and the 3rd column will be pushed below the 1st column. So instead of padding the columns, you can add a margin to the tags that are used inside the columns.

In our columns, we have <p> and <h2> tags, although you might have lists and other elements in your columns. For the <p> and <h2> tags, use something like this:

#column_wrapper p {
	margin: 1em 0.5em;
}
#column_wrapper h2 {
	margin: 1em 0.25em;
}

If you prefer, you can use padding on the <p> and <h2> tags instead of margins. It all depends on what you’re trying to do with the layout, as well as your own personal preferences.

Everything else is pretty basic and applies to any web page. If you want to center the main heading, just define text-align: center;. If you want the entire layout to be narrower like it on this sample page, just define a narrower width for #container.

That about does it for this tutorial. I hope you found it useful. 🙂

If you found this article useful, please spread the word:
Stumble it! Digg! Tweet it!



Questions or comments?

Please log in to post a comment. Sorry, but it prevents this from happening. If you're not registered yet, you can register here.