Modify CSS To Expand Template Width

Modifying your blog's width is not all that complicated - you just need to know what to look for and how it works.

To get started, we need to first navigate to our template's source:



Next we are going to find our most common content wrappers #header, #content-wrapper, #main-wrapper and #sidebar-wrapper by scrolling through the section of our template source:

#header {
width: 800px;
margin: 0 auto;
background-color: $headerBgColor;
border: 1px solid $headerBgColor;
color: $headerTextColor;
padding: 0;
font: $headerFont;
}

[...]

#content-wrapper {
width: 800px;
margin: 0 auto;
padding: 0 0 15px;
text-align: left;
background-color: $mainBgColor;
border: 1px solid $borderColor;
border-top: 0;
}
#main-wrapper {
margin-left: 14px;
width: 504px;
float: left;
background-color: $mainBgColor;
display: inline;       /* fix for doubling margin in IE */
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 {
margin-right: 14px;
width: 240px;
float: right;
background-color: $mainBgColor;
display: inline;       /* fix for doubling margin in IE */
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 parts we want to edit are the widths.

Start with the #content-wrapper and #header, and pick your desired overall width. For example, most of the default templates have a width of 660. As you can see here I changed my template to a width with 800. Then divide that width of 800 pixels (taking in account of margins) between your #main-wrapper and the #sidebar-wrapper.

That's it!