QTT: Faux Columns

For this Quick Tip I’ll show you two easy ways, css and js, to do faux columns. This is basically having two columns (or more) in your layout and having them the same height. Here is an example of a typical 2 column layout with column height problem.

The CSS Way

The first way I’ll show you is using css, basically just a background. With this method you will have a wrapper around your columns with your background image. Your image will repeat vertical to fill the complete height of your longest column, creating a faux column look (columns that look like they are the same height). Check out the CSS Way Demo first. Here is the typical code for this method:

1
2
3

#wrapper {
	background: url(images/wrapper-bg.jpg) repeat-y 0 0;
}

How simple is that css? You can of course apply more to it like rounded corners, set the width, etc if needed. Here is the image I’m using for the demo linked above; innerWrapper-bg.jpg. As you can see its pretty simple. Its small and will just repeat for the length of the wrapper. Lets check out the html:

5
6
7
8
9
10
11
12
13
14
15
16
17

<div id="wrapper">
	<div id="content">
		<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
	</div>
 
	<div id="sidebar">
	 	 <ul>
   	 	 	 <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   	 	 	 <li>Aliquam tincidunt mauris eu risus.</li>
   	 	 	 <li>Vestibulum auctor dapibus neque.</li>
	 	 </ul>
	</div>
</div>

Looks like your everyday 2 column layout. You will need to make sure not to apply a background image or color to your #content and #sidebar (although you can do some awesome stuff with transparent gradient png’s as content/sidebar bg that will overlay your wrapper bg, but thats not for this article). This way they will be transparent and show your wrapper background. Your wrapper background will need to be the width of your wrapper (content + sidebar) and then set to repeat vertical (repeat-y). Your wrapper will be the height of your longest column which means the background will extend the entire area. Remember though, if your floating your #content and #sidebar (as you most likely are), you will want to put a clear right before your closing wrapper div, to clear the floats and give wrapper a height.

The jQuery Way

What this method does is determine the height of your longest column and puts inline css to set the height of all the columns to match. You will need to include jQuery before the below code. In this case, you don’t need a wrapper for the two columns, just code them the way you would and this will just apply a height. Be sure your background is still set to repeat  though if your using an image. Lets check out the JS Way Demo real quick. This has two parts to it. First is the function:

1
2
3
4
5
6
7
8
9
10
11

<script>
function equalHeight(group) {
	tallest = 0;
	group.each(function() {
		thisHeight = $(this).height();
		if(thisHeight > tallest) {
			tallest = thisHeight;
		}
	});
	group.height(tallest);
}

The second part is called after your page is loaded and lets you specify the class of your columns (in this case class=”column”). This class needs to be applied to all the columns you want the height to match.

12
13
14
15
16

(document).ready(function() {		
	equalHeight($(".column"));
	equalHeight($(".footer-column"));
});
</script>

As you can see, this function can be used over and over, you just need to specify the class. In this case my 2 main columns of the site will have the same height. Then my 3 columns in the footer will have the same height.

One problem with this method that I ran across myself is that if you are doing any type of ajax calls that might expand the height of the column, the column will not increase. This is because it determines the column height on page load and uses an inline style, so when you reload content without refreshing the page, it does not get called and can’t expand to the new height. Keep this in mind.

Both methods work in FireFox, Safari, Opera, Chrome and IE6+. The JS function was written by cssnewbie.com.