Change the width of your blog

Changing the width of your blog in Blogger new is very easy, only with some logical calculations. Traditional blog widths are basically made to suit 800x600 screen resolutions, but you can easily intercept them to change the width of your blog

Heres a small lesson on how to change the width of your blog:

Before changing the existing template, save the template by clicking the 'Download existing template' and then start making the changes.

Go to the Template and Edit HTML in the respective blog, from your dashboard in blogger.

Turn off the Expand Widget templates for further simplification
Find the following lines in the HTML

/* Outer-Wrapper
-----------------------------------------------
*/ #outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide; font: $bodyfont;
}

#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 */
}

The Outer wrapper contains the main wrapper and the sider bar wrappers.The dimensions that specify those pages is the Width parameter. The positions of these wrappers are mentioned with the help of the "float" function. Notice that the outer wrapper does not have the float function as it is positioned in the center of the page which is specified by 'margin:0 auto:'

Change the "width parameter" in the Main Wrapper & the Sidebar wrapper and then change the width of the outer wrapper by the same amount as it has to accommodate itself to the new width.

Important:
Change only one dimension at a time and hit the 'Preview' button to see the changes before saving the changes
If you want to discard the changes you can always upload the previous template, you had downloaded before making the changes.

To change the width of the HEADER, look out for the following HTML code

/* Header
-----------------------------------------------
*/ #header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid
$bordercolor;
}

Then change the 660px to whatever you want.

Remember to keep the width under 750 px to make your blog viewable for most of the screen resolutions.
Some templates may not have the 'Outer Wrapper' section, for which you can look out for the 'Body' section and changing which would get you the required changes in the width of the posts