I just upgraded to the brand-new Wordpress 2.5. It looks pretty slick! The upgrade seemed to go off without a hitch, but let me know if anything seems broken.

There are already some nice writeups about version 2.5, so I’ll try not to repeat too much of what others have said.

First Glance: Write Post

The first thing I noticed when I sat down to write this post was that the post slug box has been replaced by this new edit permalink function below the post title:

I like this a lot because I’m obsessive about my post slugs, but I always forgot to change the default slug when the box was in the sidebar. Now it’s in a much more accessible location.

The Write sidebar has some nice improvements as well. First is the prominent Preview button. Second, the “Save and Continue Editing” button is toast and now the “Save” button lets you save and continue editing instead of taking you to some other page.

I had a small problem when I went to use the Preview button before I had saved a draft. The preview came through just fine, but the only way to get back to the Write page was to hit my browser’s Back button. And after I did that, I discovered that my post title and permalink had both disappeared.

I went to the Drafts page to see if I could recover the title and the permalink (yes, it would have been faster just to re-type it). I did, but lost the most recently-written paragraph because it hadn’t yet been auto-saved. It seems like a solution to this problem would just be to have Wordpress auto-save the post before it shows you the preview.

Previewing the post after a save and then hitting the back button caused no problems.

The timestamp feature is now more intuitive. All posts publish immediately by default, but you can edit the timestamp if you want…without having to tick a redundant checkbox.

I also like the Related links in the sidebar, though it’s less necessary now that the main Dashboard navigation has been revamped.

What I’m missing most from the new sidebar are the category boxes, which are now located under the main post box and the tags. I think they probably did this for space reasons because now there are tabs to view all categories, or just your most used, making the box too wide for the sidebar.

Plugins Passed with Flying Colors

I had no problems with my plugins. If you have the latest versions of all the following plugins, all should work fine under Wordpress 2.5:

• Akismet 2.1.4
• Bad Behavior 2.0.13
• Better Feed 1.1
• Dagon Design Form Mailer 5.4
• Exec-PHP 4.5
• Feed Statistics 1.3.1
• ShareThis 2.1
• Similar Posts 2.5b12—now requires the Post Plugin Library and includes the functionality of Similar Posts Feed
• WordPress.com Stats 1.2—I did have to re-activate with my API
• WP Unformatted 1.1
• WWW Redirect 0.3

In part I of this series, I talked about why we get backgrounds that don’t extend to the bottom. In part II, I’ll talk about a fix for this problem.

Revisiting the Problem

A major cause of this sort of background problem is a floating sidebar. The floating sidebar doesn’t take up floor space in the container box, and so the container box shrinks to the height of the main content. If the main content is the same height as, or longer than the sidebar, we don’t notice a problem. But if the main content is shorter, the background stops.

The Problem Code

If your blog layout is doing this, your code is probably set up something like this:

Note how this structure corresponds to the skeleton diagram from part I. In the code above, each <div> </div> pair makes a box. <div> starts the box and </div> end the box; everything in between is inside the box.

Revisiting the Fix

To fix the background problem, we need to add another box and force it underneath the floating sidebar. This will cause the container box to expand and fill in the background.

The Code for the Fix

Thus, we need to add another <div> </div> pair to the code above, after the main content and the sidebar, but still inside the container box. Furthermore, we need to specify that this new box goes under the floating sidebar. We do this by adding style="clear: both;" to the opening <div>. Thus, our fixed code looks like this:

As I said before, you can treat this new box as a footer and add copyright information or navigation links between the <div style="clear: both;"> and the </div>, but you don’t have to. It’ll still work if the box stays empty.

Applying the Fix to Your Blog

To apply this fix to your blog, follow these steps:

1. Back up your template file before editing it! Just copy all the code into a regular text file and save it to your hard drive.

2. Identify which <div> </div> pairs correspond to the container box, the main content box, and the sidebar box. Use the id="" labels and any comments (which will look like this: <!-- comment -->) as a guide. The container box is often named “container” or “wrapper”, the main content box is often named “main” or “content”, and the sidebar is usually named “sidebar” but is sometimes called “navlinks” or something like that.

   Because of the way Wordpress is set up, it’s probably easiest just to view the source straight from your blog and work from there. Otherwise you’ll be digging through multiple theme files for the code you need to find: header.php, index.php/page.php/single.php/archive.php/search.php, and footer.php.

   To avoid losing yourself in code soup, you may find it helpful to actually print out the code and highlight the important bits—for these purposes, you can ignore everything that comes before <body>

3. Insert <div style="clear: both;"> </div> right before the </div> that marks the end of the container box. This will either be at the beginning of footer.php or at the end of the main index template. If the former is true, you will only need to edit footer.php. If the latter is true, you will need to insert the code into index.php, and also page.php, single.php, archive.php, category.php, search.php, and 404.php, if those files exist in your theme.

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.