Pages

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 WidthThe 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:

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

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

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

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):

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/

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!

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)

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.

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.

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!

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

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.

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.

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!