How to change blogger page width?

If you are aware of CSS then changing page width for blogger templates would be a an easy task if not then it becomes like solving a puzzle.

In any case it is very easy.

Most of common blogger templates are 3 piece suit. Header, main and sidebar.
Main and sidebar are contained in outer-wrapper. Header width is same as outer wrapper. A (not so) visual view of page width is given below:

[ Header ]
<-- Outer wrapper-->
[ main ][sidebar ]

To change the page width you need to modify CSS. Go to Template->Edit HTML and copy & paste CSS code from Edit Template window into any text editor. Backup the original copy, it will come handy if you mess up CSS.

In text pad search for header-wrapper

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

In this definition you can see the page width is 660px which is default page width for blogger templates. Change it to desired value. For this post I've changed it to 960px.

Next search for outer-wrapper

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

Change the outer-wrapper to same value as you did in header-wrapper.

Now adjust the main-wrapper and side-bar wrapper width to suit your taste. Remember that the combine width of main-wrapper and sidebar-wrapper should not exceed the width of outer-wrapper. If it doesn then you will see sidebar below the main page.

#main-wrapper {
width: 410px;
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 */
}

#sidebar-wrapper {
width: 220px;
float: right;
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 */
}

You can see an example in my Blogger Tutorial, where the outer wrapper width is 960px, main-wrapper 710px and sidebar-wrapper width is 220px.

Liked it? drop a comment below.

Enjoy!!

^!^ Swami Ajayanand
-------------------------------

My other blogs
Sanatan Bharat - Voice of Spiritual Bharat
SwamiPC Blogs
SwamiJobs Blogs
Google Tutorial
1and1 Tutorial