Urban Giraffe

Step 1 - Finalising the design

I’ve talked a lot about accessibility and standards conforming philosophies, and this was not to cause mental scarring. In researching this article I realised I needed to undo some changes made in the previous article - it wasn't wrong, just wasn't right enough. A bonus is the overlapping problem is neatly fixed.

Customising a theme is largely an exercise in empirical observation. You try different values and tactics until it works, and then you go back and change something that is now broken. Often you need to undo hours of careful work just to introduce a new effect. This may seem like an excuse for not getting it right the first time, but a website requires a lot of trial and error, and that’s before you even get chance to start hacking.

Making it better

Our first task is to return index.php to its original state. We only made one change before, which was to move the get_sidebar function call. The easiest solution here is to copy index.php from the default Kubrick theme again.

Why do we need to do this? Technically it’s not necessary, and I could have skipped this section. However, I decided that if I’m writing a guide I should make sure it gives the best information I know of. The reason we want the content first and the sidebar second is for the accessibility and Google benefits that I described previously. These may be small benefits but it’s worth making the effort.

Now we have restored the index.php file we can continue styling the layout. First we add a content style:

#content
{
  width: 70%;
  float: left;
}

The content occupies 70% of the screen, and is floating to the left.

Next we change the sidebar style:

#sidebar
{
  width: 28%;
  margin-left: 70%;
}

We have removed the right floatation from the fixed width sidebar and replaced it with a variable width sidebar that is offset 70% from the left left.

What has this achieved? First, re-instating the original index.php means we need to re-arrange which element gets floated. The reason we float anything is that a div is a block-level element. When a browser renders this it adds an automatic line break, putting the next element underneath. By floating the first element (the content) we prevent this happening, and the sidebar can then appear to its right, rather than underneath.

Second, everything is now variable width. Changing the size of the browser changes the size of both the content and the sidebar. I will return to this shortly.

Third we have introduced a left margin for the sidebar. The content in the previous design would overflow the sidebar. Rearranging the content and sidebar means that the sidebar will now overflow. The left margin simply states that the sidebar can never appear any less than 70% from the left of the page. As our content extends 70% from the left, this ensures the sidebar can never overflow.

Margin forces sidebar away from content

In simple terms all we have done is change the sidebar and content around. In part one of the guide I had the sidebar first, floating to the right of the content. Now we have the content first, floating to the left of the sidebar. Stylistically it looks the same, but we get several advantages:

• No more overlapping columns
• Better accessibility
• Improved Google awareness

If you choose to have the sidebar on the left you will need to reverse the style – float the content to the right, and put the sidebar margin to the right.