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:
(more…)