Urban Giraffe

Choosing a design

Before we loose sight of the website in this increasing jumble of code, lets do something practical. Currently our website has a title at the top, a middle section for posts, the sidebar underneath, and a footer. By removing the styles we have automatically gained a variable-width design. Now we should arrange the sections into a design of our choosing. For this guide Ive gone for a standard two-column layout:

In translating this design onto the screen, the most obvious step is to move the sidebar into position on the right.

The sidebar

The sidebar is contained within the file sidebar.php. If we take a look here we find a lot of code, and we can ignore all but this summary:

<div id="sidebar">
  … sidebar code …
</div>

Everything is cleanly wrapped inside an HTML div section with an ID of sidebar. This is just what we need, as it means we can change the appearance of the sidebar by simply adding appropriate styles in the CSS file, and without touching a single line of code in sidebar.php.

So, edit style.css and add the following style after the header:

#sidebar
{
  float: right;
  width: 190px;
}

I've split this into three sections:

• #sidebar – This tells the browser the style is for an element with an ID of sidebar (.sidebar would indicate a class of sidebar).
• float: right – This floats the sidebar on the right side of the screen. You can equally use left if you want your sidebar to be on the left.
• width: 190px – Although we have a variable-width design, we don't want the size of the sidebar to change. This fixes it at 190 pixels (change to your own preference).