Urban Giraffe

Step 2 - Shrinking the page

Currently we have a full-screen theme, with the content and sidebar fluid. That is, they expand and contract to make use of available space. This is nice but has a few problems:

• Short paragraphs turn into single lines when the browser is maximised
• Layout is not fixed and we can’t guarantee the position of anything
• Hard to read at full width, impossible to read at minimum width
• Internet Explorer goes nuts at small widths

A lot of research has been done on the optimum line length, and it has shown that people read best when the length is fairly small. Open any book or magazine and you will see that large amounts of text are always broken into small columns, allowing the eye to break down the text without getting lost.

Part one introduced a page margin of 20 pixels in an effort to introduce space into the design. Let’s take this one step further. The main purpose of a blog is to be read, and we don’t want people to be dissuaded from the content by a crowded presentation.

First we reset all margins and padding. Browsers can be inconsistent, and this tries to make them think the same. To do this we introduce a global style at the start of style.css:

*
{
  padding: 0;
  margin: 0;
}

The asterisk represents everything, so acting as a global style. If we include this as the first style then the normal cascading rules allow it to be overridden in further styles.

It’s time to look at the theme in action.

The removal of all margins and padding has squashed everything together. Not to worry, as this will get changed later.

Resetting the body style

Now let’s remove some of the styles we introduced in the previous guide. Doing this will increase flexibility and we can then re-introduce them into more appropriate elements. Empty the body style in style.css:

body
{
}

Wrapping up the content

The first step in shrinking the page is to introduce a wrapper to contain the sidebar and contents. This is done so we can style both elements without interfering with the header and footer. Hopefully this will make sense once you see the effects.

Edit index.php and add the highlighted wrapping elements (line 3 and 51):