Before reading this post I recommend reading the previous posts in this series:
Customizing Your Blog – Part 1 Gathering Patterns and Colors
Customizing Your Blog – Part 2 HTML Code
Customizing Your Blog – Part 3 Fonts
Customizing Your Blog – Part 4 Creating a New Header

See where it says width under each section? That’s the width in pixels of your columns. The outer-wrapper is the width of your blog. The main-wrapper is the post column and the side wrapper is the sidebar. Some blog template don’t have pixels as their width. Instead there’s no width under the outer-wrapper and the width in the main-wrapper and side-wrapper are percents like

width: 68%;

These can be changed to pixels but first you have to add a pixel width under the outer-wrapper section in your blog template. Just use the one above as an example of what to type.

On average the width of a blog is 750 pixels. You can increase that but if you get too big your readers will end up having to scroll sideways to see everything and that gets rather annoying. To avoid that don’t get any wider than 980 pixels (px).

The main-wrapper and side-wrapper widths should add up to less than the width of the outer-wrapper. If they add up to more than the sidebar gets bumped to the bottom of the page after all the posts. If they add up exactly to the width of the outer-wrapper then there’s no padding around the words and they all blend in together making for one crazy looking mess.

FUN STUFF (MORE ADVANCED)

Changing Sidebars from Right to Left
Changing your side-bar from the left side of your blog to the right side or vice versa is as simple as typing in left or right. Erase the blue below and type in right (or left) making sure you don’t type right (or left) for both the main-wrapper and side-wrapper.

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Moving the alignment of the columns
Some blogs have the text of their main post starting right at the edge of their blog. Others have a “buffer” and their posts start say an inch or two from the side of their blog. This is what is called the margin. If your template doesn’t have margin listed under the main or side wrappers you can add it in. It should look like this:

margin: 100px;

The number of pixels isn’t the only variable that you can change. The example above is telling the computer you want a margin of 100px all around the entire column. If you just want the margin or “buffer” to be on a particular side you have to tell the computer that. For example,

margin-left
margin-right
margin-top
margin-bottom

Keep in mind that your blog is only so many pixels wide.The margin widths also need to be added to the sidebar and main post widths to make sure they come in at exactly the outer-wrapper width or less.

Background for Main Posts and Sidebars
I received a question on how to make the background for the main post and sidebar the same. The answer is actually simple and hard, or rather time consuming. The background image for the entire blog is used to create the look of the main post and sidebar sections. The ‘borders’ you see are the result of the background image.

I created the background image using my Photoshop Elements program. Any photo editing program will allow you to create a background. The hard part comes in guessing how far from the edge of your background to put your border for the main post and sidebar. Then use the instructions here for inserting the background you’ve created into your blog template.

After inserting your background you need to add the following red code under the body section of your template.

body {
background-position: center;
background-attachment: fixed;
margin:0;

The background position can be moved to either the left or right side if you wish. Having it centered though makes it easier to work with. The background attachment is fixed meaning the the blog background will not scroll when the main posts and sidebar do. It stays static on the screen.

You can then adjust the margins of your main posts and sidebar using the instructions above. You also have to delete the backgrounds for your main-wrapper (main posts) and side-wrapper (sidebar) so the blog background can be seen creating the illusion of one continuous border for both.

Any other questions? Please feel free to ask!