Faux Columns For Same Column Height

Post by **Tami** » Mon Nov 12, 2007 7:28 pm

Faux Columns For Same Column Height

By Dustin Brewer

Are you trying to get two or more columns to appear to be the same height with CSS?

There is a trick in doing this that is extremely easy and by far the best method. This is a question that I hear quite a bit, because currently CSS by default doesn't allow you to be able to do this. If you are wanting two columns, say a navigation column and a body copy column, to be the same height you can set them at a fixed height but this isn't a good idea. Especially if you have a dynamic site, because with a dynamic site it is impossible to tell how much content is going to be where in your site. You definitely don't want to have to go in and "manually" fix the column height every time the site gets updated.

The trick to getting columns the same height in CSS is over complicated in most tutorials on the subject. There are typically lengthy explanations that don't make a lot of sense. I can sum it up in one sentence and most people will get it I'm sure. I will go on to explain it a little more and any kind of bugs that may occur when using the faux columns method.

What are faux columns in CSS?

Basically, faux columns are when you use a repeating background on the div container of two divs. Simple enough, right? Let me explain a little more in detail how this all works. When you have a background that repeats along the Y axis (repeat-y) your div container will wrap around the two (or more!) divs that are within it. Because this background is repeating whatever styling is on the image will repeat also. So if you have two different colors or some kind of shadow on this image it will appear as though your two columns are going the same length all the way down. This allows for the two columns to be any different size as long as the container div is wrapping around them.

I have an example of faux columns below, I'll explain a little bit more how this works after the code jump.

This is the basic CSS,

1112.gif

Now for the HTML,

1112b.gif

As you will see, it is pretty simple to use. I have included an example file below that can demonstrate exactly what it does and how to use it. You will notice I included a break tag in the code, the reason I did this is that the container divs can have trouble wrapping around the content. I recently wrote an article about getting divs to wrap around the content that will explain it in a little more detail.

So now you can use faux columns in CSS

It is that simple, if you have any questions on its uses by all means leave a comment below and I will answer them for you. There are other ways to get your columns to appear to be the same height, mostly just with javascript which can cause other issues. I have, however, used javascript before to do this in certain situations where it isn't possible to use faux columns due to various design decisions.

For those of you that want to see this idea in action you can download a faux columns tutorial or you can also view the faux columns demo here.

About The Author:

Dustin Brewer is a web designer located in Oklahoma City, OK specializing in aesthetics in design, web standards, accessibility and usability. He also enjoys helping others to discover CSS and web design best practices through his web site, dustin brewer, a web design news site.

Josh · Post by **Josh** » Mon Nov 12, 2007 10:09 pm

This is actually my BIGGEST problem with web design when I have a layout that needs columns like this. I wish I would have known about this sooner lol.. thanks for finding and posting <img src=\'http://www.killanet.net/forum3/public/s ... #>/wub.gif\' class=\'bbc_emoticon\' alt=\':wub:\' />

Post by **Tami** » Mon Nov 12, 2007 11:11 pm

You're welcome, I was hoping someone would find it useful; another one of those gems that sometimes arrives in my eMail. <img src=\'http://www.killanet.net/forum3/public/s ... /smile.gif\' class=\'bbc_emoticon\' alt=\':)\' />

ner0 · Post by **ner0** » Tue Nov 13, 2007 9:45 am

Really good tip, I use this pretty often if I have a few floating divs =)

Post by **Scott** » Fri Nov 16, 2007 1:29 pm

Often a necessary evil, but there are a few other options. Tables, for example. *hides*.

My [url=\"http://www.scott-h.com/2007/08/11/design-troubles/\"]rant[/url] on this from a while ago.

Josh · Post by **Josh** » Fri Nov 16, 2007 4:27 pm

*stabs tables*

Post by **Marko** » Fri Nov 16, 2007 4:57 pm

Pfft, who needs the fancy code work; some Photoshop and Dreamweaver and she'll be right mate! <img src=\'http://www.killanet.net/forum3/public/s ... >/blum.gif\' class=\'bbc_emoticon\' alt=\':P\' /> <img src=\'http://www.killanet.net/forum3/public/s ... /ph34r.gif\' class=\'bbc_emoticon\' alt=\':ph34r:\' />