Adjusting the width of the blog, sidebar, main column

Generally, with the New Blogger, you don't need to fiddle with the CSS as much as with old classic template, as they can be done via the Layout (eg. change fonts and colors.)

CSS control the way your blog is displayed, and for New Blogger start somewhere near the top of the template with this


<b:skin><![CDATA[/*

What you may need the CSS for sometimes is like finding what is the width of the blog, sidebar, main column etc. For that you look for sections like

#outer-wrapper {
width: 750px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

which tells you that the width of the blog is 750 pixels

#main-wrapper {
width: 400px;
margin-left: 20px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

width of main column is 400 pixels

#sidebar-wrapper {
width: 150px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

Width of the page is 750 pixels

Width of Content is 400 pixels

Width of sidebar is 150 pixels.

Change the value to whatever you like.

Information like these can be important when you want to put things in the sidebar and want to adjust/ensure they fit the sidebar, etc.

Posted in: Adjusting the width of the blog,main column,sidebar