Wednesday, January 24, 2007

Change Width of Blog

Recently I've seen quite a few people asking to change the size of their post column or sidebar to utilize the empty space on either side of the written areas. that is most certainly possible, but you must first realize that it may wind up being a detriment to your blog readers.

Standard blog pages are designed to be viewed comfortably on an 800x600 computer screen. I see you laughing...Irregardless of how long ago you junked your 800x600, there is still a whole world of people out there using them.

When you make your blog wider, you force them to scroll side to side to see all of your content. That sometimes deters people from coming to your blog. When the blogging experience gets to be troublesome, people sometimes quit!

But I haven't deterred you, and you still want to do it...Okay! Here we go!

Before you run hog-wild at being an amateur programmer, TAKE NOTE:


This way if you get into trouble, you can always get out of it.

As you play with the following numbers in your template...change a number, then hit preview to see what it looks like. If you do not like the look or you can't remember what all you changed, hit Clear edits. That will put you back where you started from


I am using the page source from this blog as an example. The label name of your parts may be slightly different depending on who wrote the HTML.

Changing the size is rather easy to accomplish. The only rule to remember is that the sum of the parts must remain smaller than the whole! plain English, the sum of the width of the main-wrapper (post area) and the sidebar-wrapper (sidebar) must be smaller that the size of the outer-wrapper (page).

The numbers I am talking about are highlighted below.

#header-wrapper {
margin:0 auto 10px;
border:1px solid #cccccc;

#outer-wrapper {
width: 890px;
margin:0 auto;

#main-wrapper {
width: 410px;
float: left;
margin:0px 10px 0px 0px;

.sidebar-wrapper {
width: 210px;
float: left;
margin:0px 10px 0px 0px;

#footer {
margin:0 auto 10px;

I included the header-wrapper and the footer because these sizes should also be consistent with your changes to the outer-wrapper...or whatever your template calls the page area.

I have included a link to AnyBrowser. It is an awesome tool to see what your changed screen looks like on any size browser.


  1. Abbie Elizabeth Rufener said...
    Thank you! This helped me sooo much!
    All Things Bright and Beautiful... said...
    Bonnie - Thank you!! I'm off to try it out!! can it be that simple!??
    blackbelt_jones said...
    Haven't tried it yet, but it looks liie exactly what I've been looking for, much thanks. I need enough space to post unbroken lines of code.
    Rishi said...
    hey bonnie

    I have tried using your instructions, however i dont see the same thing as you have mentioned , i am using a blogger template, just have a look , i dont see some of the fields. or it looks like there is a address for that template from where it takes the default settings, could u please help me , have a look at the blog and suggest me at your best ,

    Thank You
    Chocolatesa said...
    I know absolutely NOTHING about html editing, but I managed to edit my blog the way I wanted with this!!! Thank you so much! I was able to edit the background pics as well myself, and upload them to photobucket and change the links in the template so it was the same width as the background. I'm so happy! :D
    AV said...
    I tried it and the result was wonderful for 2 days and then I couldn't open my blogs with IE, I downloaded Firefox and I can only view half of the screen of my blogs. Now I can not log in to my blogs that I changed the blog width. Please help!!!
    Bonnie Calhoun said...
    Changing the width of your blog has nothing to do with logging in. Why can't you log in? What are the symptoms?
    Jane Hunt said...
    Thanks for the ideas - I will try them! Do you know if it's possible to change size of "followers"? They say to put it at the top - but it's so big it's all you see on the right when my blog opens - check it out if you have a sec.:
    Jane Hunt said...
    Oops, I obviously gave the wrong url
    Manish Chauhan said...
    Ultimate !!

    It helped me a lot :)

    anal teen auditions van ayes ca said...
    everywhere like them just a couple of reaction??!!??!!??!??? I think Ukrainian and for your face. Moments like me, so as hot babe, and tasteless low class majority of mongers such beauty.... I had Ukrainian girls might have a padruga this free teen anal sex pics
    zak said...
    Many thanks indeed.
    Ezra said...
    Thank you for this post - easy to follow and just what I needed!
    Anonymous said...
    This was really helpful. Thanks so much!
    Make Money Online Today said...
    Great article. It was helpful and informative. hope to see more greats posts like this.
    Jimmy Stewart said...
    thanks, this worked great.. changed my outer as well as my main and it looks much better with the bigger width.
    Mandii Mae said...
    On my old blog I managed to do this perfectly and it worked just how I wanted, but on my new blog it's not working! When I try to find the
    #header-wrapper {
    margin:0 auto 10px;
    border:1px solid #cccccc;
    part mine looks like this:
    #header-wrapper {
    margin: 0px;
    padding: 0;
    background-color: $headerCornersColor;
    text-align: $startSide;

    There's no width with the px thing. Can someone help me? Thank you so much!! :)
    Bonnie Calhoun said...
    Where is your blog, so I can look?
    Mandii Mae said...

    Thanks! :)
    Tassle said...
    I know this is a very old post but I am hoping someone can advise. When I followed the above instructions it worked perfectly to change the size of the template, however the width of the post space still hasn't changed - and thus pictures are being cut off. Any idea how to fix this? I
    Bonnie Calhoun said...
    Yes Tassle! After you have widened the blog, you can widen the post area by changing the number of pixels (px) for the width of that area.

    Scroll down in the code. On most blogs it is called something line "main" and it will probably have a width of something like 420px.

    Now when you change that number, use the Preview button on the code box to see if that's the change you want to make. If it is not the right one, click the Discard Edit button, and the number will go back to what it was before you changed it. (that way you don't have to guess at what you changed)

    When you get it the way you want it, only then hit the SAVE button!
    Tassle said...
    Thank you so much Bonnie! Worked perfectly!
    Bonnie Calhoun said...
    Glad I could help!
    Curt in Carmel said...
    I know that this post is super old, but I wanted to thank you for this information. I wanted so badly to post videos of my dog doing some fun stuff on my blog, but I could only get half of the video to show. I googled for an answer, and this post was the first on the list. It helped me do exactly what I wanted to do and I owe it to you! Thank you so much for doing this post. You are the best! Curt
    Bonnie Calhoun said...'re welcome Curt! These "tricks" are always valid!

Post a Comment