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,


#divContainer {width: 800px;background: url(images/bg.jpg) repeat-y;}
#div1 {width: 200px;float: left;}
#div2 {width: 600px;float: right;}


Now for the HTML,


<div id="divContainer">
<div id="div1">
<p>This could be a simple navigation column.</p>
</div> <!-- div1 -->
<div id="div2">
<p>This would be a much larger column because it would be the body copy for the site. You would typically want to make this text very long to show exactly what the site is doing. So copy some lorem ipsum text in here if you are going to test it this way. I'll include a tutorial zip file I think on this one to show off what it does exactly.</p>
</div> <!-- div2 -->
%lt;br style="clear: both;" /> <!-- This is to make sure it wraps -->
</div> <!-- divContainer -->


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 over 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.

Popularity: 7%