RSSFixing Backgrounds that Don’t Extend to the Bottom: Part II
by Yvonne | March 23rd, 2008 @ 11:01pm | 1 Comment
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:
<div id="container">
<div id="main">
...
</div> <!-- end main -->
<div id="sidebar">
...
</div> <!-- end sidebar -->
</div> <!-- end container -->
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:
<div id="container">
<div id="main">
...
</div> <!-- end main -->
<div id="sidebar">
...
</div> <!-- end sidebar -->
<div style=”clear: both;”> </div>
</div> <!-- end container -->
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:
- 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.
-
Identify which
<div> </div>pairs correspond to the container box, the main content box, and the sidebar box. Use theid=""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> - 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.
1 Comment
Keep track of the discussion! Subscribe to this post's RSS feed.
Have something to say? Leave your own comment! | Trackback |
1. Fixing Backgrounds that Don’t Extend to the Bottom: Part I » Faces of Yve | March 23rd, 2008 at 11:12 pm
[…] In part II, I will discuss the code for the fix. […]