Wednesday, October 22, 2008

Changing widths of blog - sidebars, main column

I have previously showed how to determine main column and sidebar widths. A blogger asked how to change the widths. It is not difficult, but before I show how to change the widths, let me explain something about web designs. If you are only interested to find out how to change widths, skip to Change Width

Webmasters always take into considerations the kind of visitors to their websites. One important considerations is the screen resolutions of their visitors and previously, small screen resolutions of 800x600. This is so that such small screen visitors will see the whole blog without having to use the horizontal scroll bar. Visitors with larger wider screen will see so called "wasted space". Even Vprofessional webmasters for big websites like CNN.com have this "wasted space". The so called "wasted space" are there for a reason, that is, to make things convenient for small screen visitors. You would not want to make it inconvenient for small screen visitors and discourage them from coming back to your blog.

Now we come to the part about changing width:


Change Width
The widths of the whole content, the Header, the Footer, the main column and the sidebar or sidebars are controlled via the CSS (Cascading Style Sheet) of the template. The sections involved in the case of the 4 column template used for this blog are:

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

Main column
#main-wrapper {
margin:0 0 0 20px;
width: 450px;
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 */
}

Left sidebar
#left-column {
width: 163px;
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 */
}

First right sidebar
#rightsidebar-left {
margin:0 0 0 10px;
width: 163px;
float: left;
word-wrap: break-word;
overflow: hidden;
}

second right sidebar
#rightsidebar-right {
width: 164px;
float: right;
word-wrap: break-word;
overflow: hidden;
}

Note that the total widths of the main column plus the 3 sidebars = 450+163+163+164 = 940 pixels

The overall width is 990px. The difference = 990 - 940 = 50 pixels are taken up by the margins.

If you do not want to change the overall width, but only want to change the widths of the sidebar and/or the main column, what you should do is to make sure the the total widths of the main column plus the sidebars are alway 940 pixels (assuming you want the margins to be maintained)

For example, I want to change the main column to 400 pixels. Thus there will be an extra 50 pixels to be distributed among the 3 sidebars. Thus I might add 30px to the first sidebar, 10 each to the 2 right sidebars. Thus the new widths will be

Left sidebar = 163 + 30 = 193
Main column = 450 - 50 = 400
First right sidebar = 163 + 10 = 173
Second right sidebar = 164 + 10 = 174

and that part of the CSS become

Overall (no change)
#outer-wrapper {
width: 990px;
margin:0 auto;
padding:0;
text-align:left;
font: $bodyfont;
}

Main column
#main-wrapper {
margin:0 0 0 20px;
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 */
}

Left sidebar
#left-column {
width: 193px;
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 */
}

First right sidebar
#rightsidebar-left {
margin:0 0 0 10px;
width: 173px;
float: left;
word-wrap: break-word;
overflow: hidden;
}

second right sidebar
#rightsidebar-right {
width: 174px;
float: right;
word-wrap: break-word;
overflow: hidden;
}

ANOTHER EXAMPLE:

You want to make the whole blog wider to, let's say 1200 pixels wide. That means there will be an extra 1200-990=210 pixels to be distributed among the 4 column. Thus I may add, for example, 120 to the main column, and 90 (30 each) for the 3 sidebars.
Thus
overall width = 1200
Main column = 450 + 120 = 570
Left sidebar = 163 + 30 = 193
First right sidebar = 163 + 30 = 193
Second right sidebar = 164 + 30 = 194

Peter Chen's nice graphic signature

27 comments:

  1. This is very useful. Was just thinking to myself a few days ago...about finding out how to widen the columns on my blog. Will definitely try this out when i get a bit of free time.
    Thanks!

    ReplyDelete
  2. this is helpful. i gice it a try. thanks. :D

    btw, is there any way to manually change the placing of the layout in the blog? not using page elements in setting, because its too uptight.

    TQ

    ReplyDelete
  3. "not using page elements in setting, because its too uptight"

    What do you mean by that? Uptight? What is uptight? Blogger has made it very easy to change layout by introducing LAYOUT where you can drag and drop. What more can be easier than that?

    ReplyDelete
  4. Thank you for the easy-to-understand instructions! It worked! :)

    ReplyDelete
  5. works perfect! thanks!

    ReplyDelete
  6. How can I fix the widths for a template that is fluid?

    ReplyDelete
  7. Fluid widths templates are exactly that, the widths are fluid, that is, their widths changes with visitor's screen resolution. You can however change widths in term of percentage:

    width: 130px;

    Note, fluid width template may have a mixture of fixed and fluid widths.

    ReplyDelete
  8. hello peter,

    can we adjust the page to make it longer...? Because my bloglist seems so long especially when i choose to put snippets of the bloglist... So when that happenned my page cannot load...please help me...tq

    ReplyDelete
  9. I was trying this long back before i came to this page..this is really a nice tip and changing widths is really helpful to place gadgets and ads properly use all d pade space..thnks alot again

    ReplyDelete
  10. I was just wondering if I change the widths like you did in your example, will I still be able to drag and drop elements using the layout tab?
    Thanks.

    ReplyDelete
  11. Changing width would not affect ability to drag and drop

    ReplyDelete
  12. hello peter,

    can we adjust the page to make it longer...? Because my bloglist seems so long especially when i choose to put snippets of the bloglist... So when that happenned my page cannot load...please help me...tq

    ReplyDelete
  13. The length is elastic, it will lengthen as your content gets longer. Perhaps you may want to consider putting your blog list in a scroll box. The following posts should give you the idea how to do that (use HTML/Javascript gadget):

    Label list in scroll box

    HTML/Javascript gadget for blogroll

    ReplyDelete
  14. Hi Peter. I played around with the width but encountered a glitch. On Mozilla-Safari-SeaMonkey things work just fine but on IE, the middle posts would start down below the sidebars until I put the width formula as it is. But, as you can see, there is this stupid white space between the middle post section and the right sidebar. If I change the widths to get rid of it, IE puts the posts down low again. I do this as a hobby and do not speak HTML or blogger. Any ideas? Thanks!
    http://www.buckytownusa.com/

    ReplyDelete
  15. Hi Peter,

    Just wanted to say a big, big thank you for this blog. I found this post really helpful, as well as your help on getting rid of the borders around images. It was bugging me for so long until I tried your trick :) Thanks!

    ReplyDelete
  16. Thank you.

    I was wondering if you could suggest ways to have a sideways blog, one that rolls across the page and not down as per the normal? A landscape version. One scroll bar at the bottom and no clicking required.
    Cheers jeff (idraftnz@gmail.com)

    ReplyDelete
  17. idraftnz,

    I doubt that is possible

    ReplyDelete
  18. Peter,
    How can I change the margin for the text in my sidebar? I figured out how to change the background color. I'd like to have the text remain flush left, but in a little from the edge of the sidebar.

    www.travelsweeps.blogspot.com

    Thanks!

    ReplyDelete
  19. peter, thanks very much for this tip. Tremendously helpful. I'm currently using Rounders 4 for my blog. While I can change the width of the boxes, the margin of the text seem stuck. Thus, I have wider columns but the text doesn't spread out over it. It stays in the old form if you will. Further, the corners that expanded aren't round, they are square.

    Any suggestions?

    With much appreciation,
    DN

    ReplyDelete
  20. I, too, am struggling with the margins in my 3-column layout--my left column is right up against my main column, whereas I have some space between my main column and right column. Any suggestions? Thanks!

    ReplyDelete
  21. Thanks for posting this..Its very useful, but could you tell me how to change the sidebars without having the content in my sidebars hidden..Take a look at my blog jamaicanmommies.blogspot.com and let me know

    ReplyDelete
  22. Sidebar content hidden? I just checked your blog and looks like some elements were too wide and were partially hidden. If so, what you need is to make the sidebar wider.

    Looks like this is the template you are using:
    Blogger Template Design: Froggy
    Design by: Ourblogtemplates.com, July 2008

    ReplyDelete
  23. thank you so much for posting this!!! :)

    ReplyDelete
  24. Cheers, I've just rated it as helpful in the frame blogger put above your website (I was the first :-). I think this came up because I navigated from blogger's help page. One thing you might like to take up with blogger is that it wasn't possible to post a reply until I removed their frame. I could click, but nothing happened.

    ReplyDelete
  25. Thank you so much for covering this topic! I went to the Template Designer, adjusted the sliding sidebar, viewed results until it was too wide, then slid back until it worked. Next I viewed each post of microfilmed newspaper articles. Thank heavens I did as my 1st post was wider than all others, so the sidebar overlaid it. Played with post size until it was the same as all others. Now the screen displays the post along with my bloglist & my personal information without the need to scroll sideways. The posts are there, not just as a public service, but also to advertise my work. Until this adjustment, my sidebar was easily skipped.
    It all looks so much better & your information got me through it.

    ReplyDelete
  26. Hey! I had a question... how do you remove the white space around a blog? Like around the header there is a space; and also a big space around the posts and sidebar. I wanted to get the header right up against the background. Thanks!

    www.maid4him.blogspot.com

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics