Making Web Columns Appear to Be the Same Height
One of the problems with CSS layouts becomes apparent when you set up a multi-column layout where one of the columns has a different background color (or pattern) than the others. If that column has enough content, it will stretch down to the bottom of the page, and your layout will look fine. But if you've got more content in another column, the background color or image will stop as soon as the content stops.
This is true, even if you put a height:100% style on your column.
For example, if you have created a two-column layout using the 2-Column Layout template you can put a background color on the navigation column to make it stand out more. But if your navigation column is only 200 pixels high and your content column spans several screens, the background color will only stretch 200 pixels down the side of your page. The rest of the page will be the same color as your background color.
Luckily there is a way to fake it with background images. And if you have a lot of content in your main column, you can fake it with background colors and the inherit feature of CSS.
Faux columns were introduced in A List Apart. The idea is that instead of putting the background image or color on the column itself, you instead create a background image for the entire page that tiles and has the colors that you want in the widths that you want.
Once you have a background image that will tile to create the look of columns, you can place it in the body of your Web page with this style:
Set the background color to white (or another color if you'd like). And then tile your background image on the page repeating only on the y-axis (vertically).
Once you have your backgrounds set up, then start building your CSS columns around it. You can build your page using floated divs or using absolutely positioned elements.
The challenge of this layout is that it's difficult to understand in writing. So I created a layout template that demonstrates it's use.
Two Column Faux Column Layout
This is true, even if you put a height:100% style on your column.
For example, if you have created a two-column layout using the 2-Column Layout template you can put a background color on the navigation column to make it stand out more. But if your navigation column is only 200 pixels high and your content column spans several screens, the background color will only stretch 200 pixels down the side of your page. The rest of the page will be the same color as your background color.
Luckily there is a way to fake it with background images. And if you have a lot of content in your main column, you can fake it with background colors and the inherit feature of CSS.
Faux Columns
Faux columns were introduced in A List Apart. The idea is that instead of putting the background image or color on the column itself, you instead create a background image for the entire page that tiles and has the colors that you want in the widths that you want.
Once you have a background image that will tile to create the look of columns, you can place it in the body of your Web page with this style:
body { background: #fff url(background.gif) repeat-y; }Set the background color to white (or another color if you'd like). And then tile your background image on the page repeating only on the y-axis (vertically).
Once you have your backgrounds set up, then start building your CSS columns around it. You can build your page using floated divs or using absolutely positioned elements.
A Faux Columns Template
The challenge of this layout is that it's difficult to understand in writing. So I created a layout template that demonstrates it's use.
Two Column Faux Column Layout
