Blogger 101: Widening Margins to Fit Your Photo

I used the Son of Moto template for this one (in order to work through Kristen's example). It should work in a similar fashion with other templates, though in some you have to change the width in several places. Some templates are very difficult to change the width on because they have image files that provide shading or borders. You might want to eliminate these files first, if you can. By the way, in Son of Moto, widening the borders automatically gets rid of some shading on the edges.

First find this segment in your coding:

#outer-wrapper {
margin: 0 auto;
border: 0;
width: 692px;
text-align: left;
background: $mainBgColor url(http://www.blogblog.com/moto_son/innerwrap.gif) top right repeat-y;
font: $bodyFont;
}

The "width:692px;" line indicates the width of your header and post/sidebar sections together. You can change 692 to 800 (to fit Kristen's example) or desired width. I've managed with a 900 width, but that might be pushing it.

Now find this segment in the coding:

#main {
width: 400px;
float: left;
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 "width: 400px;" indicates the width of the blog post area (not including sidebar). You'll want to widen this too, or you'll have a big wide area in the middle of your blog. I would suggest a width of 528 in Kristen's example, but you can play with different numbers to see what works.
Hope this all makes sense. It's a little challenging to try to explain. :)