the # symbol placed directly before wrapper indicates that the division should only be used once within any webpage.

#wrapper {
width: 1000px;
margin-left: auto;
margin-right: auto;
}

The { symbol opens the instructions and the } closes them. I have inputted 3 basic instructions: the width, which is quite straightforward, and two margin instructions. The two margin instructions means that that content will be centred to any screen (no matter how big) because it will always create an automatic margin left and right. This is the standard way of centering divisions.

Your stylesheet should now look like this:

Click to Enlarge

If you save your changes and refresh your blog you should see that it has now been centered:

Click to Enlarge

What you can see now though, is that we don’t have enough content to really see what things look like, so copy and paste the following into your first post (deleting what was there before it):

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vehicula cursus condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed porttitor orci sed massa suscipit consectetur. Proin fringilla aliquam augue a tincidunt. Sed sodales pulvinar ipsum, nec pharetra arcu porttitor id. Nulla facilisi. Ut sit amet facilisis neque. Vestibulum ante dolor, pulvinar sed condimentum at, auctor a tellus. Etiam fringilla pellentesque felis, vel convallis elit malesuada vel. In mauris dui, euismod in congue a, convallis sit amet dolor. In hac habitasse platea dictumst. Aliquam condimentum, quam vel porttitor pharetra, nulla tortor elementum turpis, nec aliquam justo turpis sit amet nisl. Donec in augue sed est auctor venenatis vel in urna. Pellentesque facilisis tortor placerat felis egestas posuere. Duis ut turpis urna, eget commodo ante. Nunc iaculis malesuada risus at auctor. In posuere porttitor vehicula. Phasellus suscipit tortor id ipsum convallis ac euismod sapien fermentum. Suspendisse vel neque erat.

Donec tortor lectus, porttitor eget viverra ut, tincidunt ac nulla. Cras ipsum ligula, auctor ac varius sed, imperdiet gravida libero. Vivamus nisi diam, vehicula eu tristique eget, dictum ac justo. Donec vulputate posuere dui, eget pulvinar orci consequat id. In dolor purus, ornare ac tempor non, ullamcorper id est. Integer posuere nisi in ligula ullamcorper molestie. Aliquam at nunc in ante luctus ullamcorper vel ut odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin lobortis laoreet mauris ut condimentum. Vestibulum rutrum ornare libero sit amet varius. Nulla convallis enim gravida massa eleifend sit amet vulputate enim cursus. Praesent ultricies gravida sodales.

Vivamus ac lacus in sapien rhoncus sodales laoreet at tellus. Ut risus nisi, tincidunt ut adipiscing eu, bibendum in augue. Donec egestas massa sed nulla vehicula luctus. Etiam ultrices auctor velit non vehicula. Suspendisse potenti. Morbi nec nunc enim. Maecenas et diam mi, eget vestibulum metus. Nulla placerat purus id tellus venenatis et faucibus augue dictum. Sed suscipit sem non quam auctor a suscipit turpis pretium. In hac habitasse platea dictumst. Quisque vulputate ante vitae leo sodales mattis.

Aliquam id sapien a diam vestibulum pellentesque nec ut mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eu velit arcu, ac congue augue. In nec turpis in felis mattis cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce feugiat faucibus risus. Integer congue odio nec magna adipiscing fringilla. Donec iaculis, tortor sed luctus ullamcorper, nibh est pulvinar sem, eget pellentesque velit enim sit amet magna. Donec lacinia est non urna feugiat consequat. Quisque elementum nulla in nulla pharetra at suscipit sapien adipiscing. Donec odio risus, tempor at consequat a, sagittis ac lorem.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed id est sed sapien luctus dictum. Sed imperdiet euismod est nec adipiscing. Nunc porttitor consectetur pulvinar. Quisque lacinia imperdiet arcu eu pharetra. Donec gravida imperdiet turpis, vel luctus eros faucibus a. Sed nisl risus, molestie rhoncus feugiat sed, ullamcorper in nisl. Proin eleifend faucibus risus nec ultricies. Vestibulum sagittis magna vitae mi tristique non tempor massa luctus. In pharetra leo vitae velit mattis ut accumsan mi interdum.

Update your blog and you should now see the real width of your blog:

Click to Enlarge

Because we currently have no sidebars the content is filling the whole of the 1000px wrapper. Let’s change that by styling the content and adding some sidebars.

First thing you need to do is find out what is controlling how the blog post appears. You can do this by clicking on your Main Index Template (index.php), let’s focus on the instructions right at the start of this file:

Click to Enlarge

The first thing you will see is that the page is loading your header.php right away, you’ll soon get used to these PHP instructions, and we might be ammending some of them later. Next up you’ll see a new division:


if you scroll down the index.php file you can find where this is closed:

Click to Enlarge

As you can see from the two php instructions underneath the closing container tag, the sidebars and footer will be loaded after this container is closed, so we can set the container width and use that to make the blog post, title and meta data etc all the same width without changing the sidebars or footer. Let’s do that now by going back to the stylesheet and adding the following:

#container {
width: 570px;
float: left;
}

Save your changes, refresh your blog and you’ll see the content has narrowed to 570px:

Click to Enlarge

I have added the instruction “float: left” to make sure the content sits as far left as it can, so that we can put the two sidebars into the free space on the right. To do this we first need to check sidebar.php to make sure we know what ids they have:

Click to Enlarge

As you can see, the primary sidebar id is “primary” and the secondary sidebar id is “secondary”, we can therefore specify their widths in our stylesheet as follows:

#primary {
width: 240px;
float: left;
}
#secondary {
width: 160px;
float: left;
}

Once you have saved changes you will need to drag and drop some widgets into these sidebars in order to check that they are working and being displayed where you want them to be. Drag ‘Pages’ widget to your primary sidebar, and the ‘links’ widget to the secondary sidebar. You should then see the following:

Click to Enlarge

You will see that your two sidebars are nicely in line to the right of your content. However, because we are using the ‘float’ instruction the footer has moved up to a place where we clearly don’t want it. So let’s style that next. To start with, select footer.php so we can see what is going on:

Click to Enlarge

The footer is quite simple, we can see that the div id “footer” will style it. Also, just before the end of the file you can see the closing tag for the “wrapper” division that was opened in header.php. So we can see why all the content has been centered by just one instruction, because everything is ‘wrapped’ by the “wrapper” division. I hope that makes sense, and that you are starting to see how the basic structure is working. So, we can now add an instruction to the footer to make it sit below the content and sidebars properly:

#footer {
clear: both;
float: left;
}

“Clear: both” ensures that nothing floats either side of the footer, is basically ensures that the footer sits below the other divisions. Floating it left makes it appear on the left of the wrapper, this can be changed to right if you prefer. Save the changes to your stylesheet and refresh your blog and your footer should now be below your content:

Click to Enlarge

Your blog should now look like this:

Click to Enlarge

Congratulations, the basic layout work has been done, we can now look at styling each part to make your blog look unique. This is where the fun and real creativity can start.

Part 3 Checklist

Before proceeding to part 4 you should make sure you have done the following:

• Selected an appropriate overall width for your blog and added it to the “wrapper” instructions of your stylesheet.
• Set the width of your content within this wrapper using the “container” instructions in your stylesheet.
• Set the width of your sidebar or sidebars – it is up to you whether you want one or two – and added this to the relevant instructions in your stylesheet (“primary” and “secondary”).
• Made sure your footer sits beneath your content using the “clear:both” and “float” instructions.

If you are happy that all of his has been done, then please move onto part 4: Styling your header.