Fixing Backgrounds that Don’t Extend to the Bottom: Part I

by Yvonne | March 23rd, 2008 @ 2:17pm | 1 Comment

It’s a common problem with blog templates of all stripes: backgrounds that stop abruptly in the middle of the page and don’t extend to the bottom. In this two-part series, I will explain why this can happen and how to fix it in your template.

Web Pages are Made of Boxes and Text

To start explaining why this happens, we need to go back to the basic building blocks of web pages: boxes and text (and boxes of text). Normally, when you mix boxes and text, something like this happens:

In this case the box contains text, but it could also contain an image. The box just sits there and breaks up the flow of the text.

To get a cleaner look, web designers often resize the boxes and float them to one side, like this:

Floating a small box allows the text to flow smoothly around the box.

Using Boxes to Create Page Layouts

You can use the same floating technique to create sidebars for web pages. The below diagram shows the skeleton of a typical web page:

We define boxes for content areas and pack them inside a bigger, container box (shown here in dark red). The container box is filled with a background. To get a sidebar, we just take one of the boxes (or both boxes), make it narrower, and float it to the side, like this:

The other box will flow around the floating box, just like plain text. The only difference is that a box is box-shaped and so it will keep to the side of the floating box, rather than making an L-shape around and under the floating box.

Non-Extending Backgrounds

The problem with non-extending backgrounds shows up when the floating box is longer than the non-floating box. When you float a box, it stops taking up floor space inside the container box. The height of the container box expands and contracts to provide just enough floor space for the boxes inside. So when you float a box for the sidebar, the container box contracts to the height of the non-floating box, taking the background with it:

The Fix

To fix this, we have to put another box inside the container box, and we give this third box a special property. We say that this third box cannot be next to any floating boxes; it must go underneath. This forces the container box to expand to accommodate the new box, and the background expands with it.

This third box can be a footer that contains copyright information or navigation links, or it can just be an empty box.

In part II, I will discuss the code for the fix.

1 Comment

Keep track of the discussion! Subscribe to this post's RSS feed.

Have something to say? Leave your own comment! | Trackback |

Enter search keywords: