By: Zoe Gillenwater
Page 1 of 3
One of the most frequent layout issues that new CSS developers want to tackle is equal height columns. In table-based designs, this is easy because each cell in a row is tied together. The height of one affects the height of the others. However, in CSS-based designs, each div is an independent element and is only as tall as its content needs it to be. This means that if you use two divs to create a two column design, but your right column has more text in it, then your right column is going to be longer.
How, then, can you tell your divs to look at other divs on the page, figure out which one is the longest, and adjust its height to match? In CSS 2.1, you can use the table display properties to get your divs to act like table cells without really being table cells. Unfortunately, Internet Explorer doesn't support most of these properties, so this solution is impractical at the time being.
Luckily, some clever developers came up with a way to simulate the appearance of equal height columns without really having them: wrap the columns in a container div and assign it a background image that repeats vertically. When tiled down the page, it creates an image of columns, and the divs can simply be laid over the top. No one is the wiser!
This technique has come to be known as the "faux columns" technique after Dan Cederholm's article at A List Apart. In this article, he shows how to use a background image on the body to create the illusion of three equal height columns. Because the example layout he uses is fixed (meaning all the columns have rigid pixel-based sizes instead of liquid percentage sizes) and because background images themselves have fixed pixel dimensions, many readers mistakenly thought that the faux columns technique can only be used in fixed designs. Not so!
In this article, you'll learn how to use vertically tiling background images to create liquid equal height columns that can grow and shrink as you resize your window.
The trick in creating liquid equal height columns is all in how you set up the background image. We'll start by making a simple two column design with the blue left column at 20 percent and the right pink column at 80 percent. This means that no matter what size our browser window is, we want blue to fill up the left 20 percent and pink to fill up the right 80 percent. It follows, then, that our background image should be blue on the left 20 percent of the image and pink on the right 80 percent.
We also know that our background image will need to be very wide – with such big monitors nowadays, there's no telling how large someone might be running their browser. So, we'll make the background image 2000 pixels wide just to be safe. Open up Fireworks and create a new document that is 2000 pixels wide by 10 pixels tall.
A little simple math tells us that 20 percent of 2000 is 400, so draw a 400 pixel wide rectangle and fill it with blue. Position this rectangle at the left of the document. To make the remaining 80 percent (1600 pixels) of the document pink, simply change the canvas color to pink. We now have an image that, when tiled vertically, will create the appearance of two columns: a thin blue one and wide pink one.
However, we don't want our left column width fixed at 400 pixels as it is in this background image. If we place it on the container as is, it doesn't adjust in size as the actual columns do when the window is resized.
The trick is in the background-position property. This property controls where the background image is placed in its container. If you use pixels or other fixed units to position the background image, it moves the top left corner of the image to that point in the box. However, when you use percentages, you position a point within the image itself, not the top left corner. This point is moved to the corresponding percentage point location in the box. So, if you set background-position to "20% 10%", the point 20 percent across and 10 percent down the image is placed 20 percent across and 10 percent down the box.
Image 1: A diagram of how the background-position property works with percentages. If the background image was larger than the box, it would be cut off on the left and top, instead of showing a gap.
Can you think of how this provides an easy way to center a background image? Just set the left-right value to 50 percent, and the browser will find the spot in the background image that is 50 percent of the way from the left edge and place this spot at the corresponding 50 percent spot of the box, centering the background image.
In our case, we want the blue part of the background image to only take up 20 percent of the window. The spot where the two columns will meet is 20 percent over from the left edge of the screen, and this is also where we want the edge of the two colors to be. So, we want to tell the browser to find the spot in the background image that is 20 percent from the left and position this spot 20 percent across the page so it will correspond with the meeting point of the two columns.
background: url(tile.gif) 20% 0;
In this case, I've placed the background image on the body, but it can be placed on any container div as well. Now the 20 percent spot of the image matches up with the 20 percent spot of the page, so as the browser window is resized the background image moves along with it. In the downloads for this article, open the file twocol.htm to see this in action.
Image 2: The background image does not resize, but just moves so more or less of it is exposed in the viewable area of the window.
If we wish to change our left column to 25 percent, for example, all we need to do is change that div's width in the style sheet, change the background position value, then edit our background image so that exactly 25 percent of it has our left column color.