Making Div Layouts extend all the way to the bottom

Here's a easy way to make divs "seemingly" extend all the way to the bottom of the page, even when the content distribution varies from sidebars. This technique applies to all two or three column CSS layouts. This only applies to fixed width CSS layout designs.

The first thing you want to do if you want to have different colors for your columns, other than the content container it to create a background image that you can apply as the background image for the containing DIV. As long as your CSS is fixed width for all your columns, which quite a lot are, your side columns will extend all the way to the bottom no matter even if one or more of your columns are empty. Make sure you apply "background: transparent;" to the columns and the content div containers.

Simply color in the width of each column in your favorite graphics editor, apply a border in between or even a drop shadow as your in-between borders. I've used this technique a bit and it works great without a bunch of CSS tricks. It is the easiest way to make your content columns to appear even, and using a graphic can often provide a much slicker interface for your site, providing you are subtle with the effect you use.

I hope this web design tip helps someone, as my goal it to help sites look and operate better.