This post is part of an ongoing series into how to make a Wordpress theme. You might like to read the previous post first.

First of all, I’ve slightly adapted the XHTML code in this step (compare Step 3 with Step 2). Nothing major though - I shortened the first post to an excerpt, added in a strong tag, some links and decided to place the archives and category links in the centre column after your feedback, rather than on the right hand side like they were in the initial design idea.

Now onto the stylesheet which can be a little daunting for beginners. Add in the code to attach the stylesheet to your template in the header, I’m calling mine styles1.css and will change this to styles2.css etc for each additional step so if you want to go through these posts again at a later date, all versions will be there.

There’s a tonne of different ways to use stylesheets to lay out your pages in different columns/sections. Each method has its strengths and weaknesses and there’s many useful tools out there such as One True Layout and Layoutomatic and countless articles which will help you with specific problems.

I’ll try and keep this layout simple by using floats to handle the different columns. A floated container “floats” as far left or right as it can - it will stop if it hits another container.

Note:When I talk about a container, I’m talking about a chunk of code which starts and ends with a <div> tag.

In this layout, there’s an overall container which is centred on the page and sitting inside it is the sidebar (floated to the left) and the main content (floated to the left). Inside the content area are posts (floated to the left) and inside these posts are metadata (number of comments, post date, related links etc) which are also floated to the left to sit alongside each post. Phew!

I’ve also added some padding so that if the text gets really wide in one of these areas, it’s not going to have no spacing with the column next to it. When you add padding to a container, reduce the width of the container.

I’ve done a wee bit of styling (font, sizes, color, spacing) in the stylesheet as well.

Here’s the stylesheet and the template Step 4. If you have any questions about the stylesheet, please let me know.