Create equal columns with simple CSS

A very common problem if you’re using CSS is creating equal columns.

That is, having the same height.

There are lots of reasons why two or more columns should have the same height, but that’s out of the scope for this article.

Point is, if you use simple CSS, a column ends whenever the content ends and thus you almost always end up with columns of different heights.

Like when you have a lot of content and only a short menu bar. In such a situation you may want to create equal columns.

equal columns CSS

I usually solve this problem using the ‘faux columns‘ feature by Dan Cederholm.

If that is way above you head, just relax (I have an easy solution below) and consider this.

Cascading Style Sheets (CSS), was brought about by the World Wide Web Consortium (W3C), and not by evil programmers with too much time on their hands as originally believed, to develop a standard which could be interpreted by different browsers. This became a necessity as Microsoft and Netscape battled for world domination and kept adding html attributes which were only understood by their browser. Great for them, bad for us.

Now, through the implementation of CSS, we can design ONE website for all browsers instead of multiple websites, one for each browser.

CSS really makes your life as a webmaster easy. Yet lots of people don’t know how to use CSS or even are afraid to start using it. We really should change that right now.

You see, in the past I wrote a CSS beginners guide called ‘Taming the Beast’. It’s an easy read and a really simple way to learn CSS and start using it.

Keep your wallet in your pocket, as it is a free download for you.

Download your CSS tutorial.

Read it and start using it.

Now, back to the equal columns height using simple CSS.

Last week I was asked to modify a CSS file of an existing site in order to correctly show the menu bar.

It used a ‘position:absolute’ feature to get the menu bar exactly where wanted, but that didn’t work well.
Because position:absolute is relative to the screen instead of the page.

So I deleted that part and made some changes in the HTML page in order to have the menu displayed well.

But that immediately lead to another problem: the equal columns problem.

The columns didn’t have the same height, as the owner wanted. And since I wasn’t in control of the site, I couldn’t add a background image in order to use the ‘faux columns’ solution.

So I searched Google for an instant solution and found an easy one.
Maybe easier than the ‘faux columns’, because you always have to change your background image whenever you change the width of a column.

The solution is is very simple and has a few advantages over the ‘faux columns’ one. You can read all about it at Equal Columns.

Worked like charm!

Don’t forget to download your CSS beginners guide.

Then let me know what you think.
Do you use CSS or are you planning to use it?
Post your comments below.

Share this post using these icons:

Related Posts


11 thoughts on “Create equal columns with simple CSS

  1. d3so says:

    Thanks for sharing this. I have very little CSS knowledge. I’m starting to learn CSS now that I need to edit my blog accordingly.

  2. Stephen Dave says:

    This article was great. I am not very good with CSS yet. I cut my teeth on notepad back in the day so I am new all over again. I have been using free templates to try and reverse engineer them so I could get a handle on things but, I learned more from this article than the countless hours I’ve spent with trial and error. Thank you for the post.

  3. asset says:

    Just stumbled upon and I find your site very helpful. I have a bit knowledge in HTML and CSS and I am quite confused in formatting CSS columns and I think this tips will come to help me. Thanks, good job sharing this one.

  4. Roman says:

    Working with CSS can be tricky especially when you are starting out but it’s worth learning. It will make the webpages a lot faster which is a huge advantage not only for the visitors but also for search engines. Everyone that doensn’t know how to use CSS should learn it because it will make everything easier and better. That was a great post by the way…

  5. Richard, Leeds says:

    RE: “Now, through the implementation of CSS, we can design ONE website for all browsers instead of multiple websites, one for each browser.”

    This isn’t *exactly* right.

    The idea behind CSS is that it allows us to separate design and content.

    This means that the HTML doesn’t have to change, but we can have multiple designs for different formats (screen, print, mobile etc), without having to have multiple HTML files, as we would have done in the past.

    Likewise, if you want to have some pages of your site red, and some green, it allows us to add extra template style sheets to do that simply, without having to completely re-build the page. Overriding the basic template style is what the “cascading” bit means.

    Basically, CSS allows us to have multiple designs with one set of content. It’s main benefit is much tidier, easier to read code.

    If CSS didn’t exist, but HTML had been standardised, then this would also have removed the necessity of building for multiple browsers. The problem was they all handled code differently, not that CSS wasn’t around.

  6. Chef B says:

    Great piece of code. We’ve had issues with this column layout ever since switching from table to css sites for our products. Thanks for sharing this technique.

  7. best says:

    Couldn’t agree more with you – “CSS really makes your life as a webmaster easy”.
    I taught myself how to use CSS years ago – pretty much by reverse engineering and with the help of Dreamweaver.. and I still remember clearly until now that creating columns and DIVs are some of the biggest problem I got back then, costing me a lots of time learning that.

  8. Mike says:

    This is a great tip since I was struggling witht he same problem a while back. I would note note that the battle between microsoft and netscape is back with the whole CSS3 Hype. As long as it’s not a standard, each browser will make up it’s own tags.

    And I don’t agree with Steven about using Tables. Maybe it’s easier, but tables are for tabular information and NOT for design.

  9. Sharron says:

    Hey, thanks for the post! When I am changing any of my CSS, I always copy and paste it into Dreamweaver. It allows me to view your changes without modifying your CSS within WordPress. It’s a bit tricky sometimes because not all of the images and styles load, but it gives me a basic idea of the changes I am making Anyway, another great post and always remember to Backup Your Database! Jared

Comments are closed.