Urban Giraffe

Fixing the sidebar

Now our site looks better, but the footer is not spanning the whole screen:

See how the sidebar causes it to wrap too early?

Again this is a simple problem which we fix with two changes. First we need to open footer.php. Just like header.php, this file consists of a section of code enclosed within a div element. In this instance the element has an ID of footer. Before we go and make a style for it, lets just move the stray hard-rule hr inside the div:

<hr />
<div id="footer">
        <p>
<a href="feed:<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a>
. . .

Becomes:

<div id="footer">
<hr />
        <p>
<a href="feed:<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a>
. . .

Youll see why later. Now lets add that style:

#footer
{
  clear: both;
}

This tells the browser not to allow any floating elements on either side of the footer. When we look at the site now, we will find that the sidebar has been neatly tucked in the proper place, and our page matches the original design. Putting the footer hr inside the div ensures that the hard-rule doesn't get wrapped as well.