Easy Equal Columns with CSS

on | 4 Comments

In a previous article I described (in principle) a method using JavaScript to get equal columns in a two-column layout. Of course, that’s not always the most elegant solution. Another solution, which is much easier to implement is completely CSS based. I’ll describe briefly how this is done and what possible effects it could have on your site’s layout and code. Here is the demo page, if you want to jump ahead.

The Key — The Columns Are Not Really Equal

The only way to do this without using a very complex CSS layout is to essentially create the illusion that you have equal columns. But don’t worry — although the result is not really equal columns, it looks and acts exactly as an equal column layout would.

How to Mimic the Columns

To describe the method, I’ll just use a simple example: Two DIVs side by side representing the two columns; and one DIV containing the two. From there, it’s quite simple — just wrap your containing DIV with another DIV then apply ”overflow: hidden” on that outer DIV to ensure it doesn’t collapse in Firefox. Then, add a background image that repeats on the Y-axis (vertically). So, if you have a drop shadowed border, or even a simple 1 pixel border, you would create the image in your image editing program (Photoshop, Illustrator, etc.) and then just adjust the background-position of the image in your CSS to place it exactly where you want it. Since this DIV is essentially behind your two columns, holding both of them, you cannot have a background color on your columns, as it would block the image from showing up.

Keep in Mind

You might think this could be done with a one pixel-border on one of the columns, but remember, one of the columns is not going to extend to the bottom, so the border method won’t work without some serious CSS hacks and workarounds. You’re creating the illusion that the short column is extending to the bottom by positioning the background image in a place where it mimics the short column’s border. Except, unlike the short column, your outer container (the container holding the container, if you will) is always going to extend to the bottom, thus creating the illusion of a two column layout where the columns are always equal, regardless of content. And best of all, either of the two columns could extend larger than the other, and the illusion would still work.

Overall, a Very Easy Solution With Limited Drawbacks

This really is an easy to implement solution that can work on many CSS layouts, and doesn’t have too many drawbacks, other than adding some non-semantic code to your markup and (somewhat) complicating your DIV structure.

So if you’re in need of a hack-free quick fix to a two-column layout, this is a good solution and will work in virtually every browser and platform.

View the demo page, to see this simple, yet effective, solution in action.

4 Responses

  1. Rich:

    This technique has been well established for years now. It’s a good re-cap, but I’m puzzled why it got picked up by cssglobe.com

  2. Thanks, Rich. I obviously didn’t think I was inventing the wheel here, that’s for sure. However, I have seen developers have trouble with this sort of thing, and I thought it would be a good complement to my article on a JavaScript method for something similar.

    As far as cssglobe.com, I really don’t know the site that well, but I’ll have to check to see what types of articles they usually link to.

  3. Hi
    It’s better to put reference link

  4. There is a link, which I added later, in the first paragraph. Here it is: Demo page for equal columns

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field. If you use keywords, your comment will be deleted, or your name will be replaced with the alias from your email address. No foul language, please. Thank you for cooperating.

Instructions for code snippets: Wrap inline code in <code> tags; wrap blocks of code in <pre> and <code> tags. When you want your HTML to display on the page in a code snippet inside of <code> tags, make sure you use &lt; and &gt; instead of < and >, otherwise your code will be eaten by pink unicorns.