Austin Web Design Blog

Two-Column Layout Height Issue

In the previous example we created a simple layout using floats which enables you to design your webpage without the use of tables.The problem with our two-column layout is that the right column div will not extend the length of the left column div unless you declare a height on both. Websites usually need to be flexible in length to accommodate small or large amounts of content, so this layout will not be practical for most web designers. This article will show a fix for this layout allowing for the right column background to extend the full length of the left so that both will be touching the footer. Here is what we have:

2 column layout with one column too short

The easiest way to accomplish columns that appear to be the same height is to create a background image to tile. For my example I made the right column 150px wide with a background color of #C00. In Photoshop or your preferred graphics software, create an image 150px x 10px. Create a background image to tile on our container div. In your stylesheet on the #container add background: url(/images/2_col_layout_bg.gif) right repeat-y (link to your image for tiling). The right specification sets the background to tile starting at the far right side of the page which gives the result below:

Obviously, we have a problem – a white gutter between the left and right columns, not exactly what we want. The total height of the right column div is 150px plus the 4px padding on each side that I added. So we actually need an image that is 158px wide. Keep this in mind also when calculating the width of the container. Padding and margin widths need to be added to the width of your columns to get an accurate total width of your page, an easy error to make that might produce horizontal scrollbars when you don’t want them.

You can view the html solution here.

We will discuss this layout further in a future post. The major problem with this layout is what happens when the right column happens to be longer when the left? We will be back to square one with the left column background being shorter than the right. For ultimate flexibility another solution will be needed.

One final note. When using images for your backgrounds as we did here, it is a good idea to have a background color specified on either the container or the right column even with the image tiling in the background. In my example the text is white. What happens if someone has images disabled? They will get white text on a white background. It will be unreadable, and also can be bad for your search engine rankings as that could be considered by search engines to be invisible text.

Fri, 18 Mar 2011 08:15

Tags , , , , , , , , , ,

Comment Two-Column Layout Height Issue