For a complete list of How To's follow this link.
If you're looking for something else,
check out the LABELs drop down menu.

Thursday, November 02, 2006

How to: Widen columns

Randi has asked how to increase the width of the columns on her template:

I would have liked to have a little more space in between the two columns on my page. Between the main "bar" and the (right) side bar. And how would I add a left side bar? Anyone? ... Randi

Increasing the width of the columns on your Blogger template couldn't be easier. Before making any changes, it is recommended to make a copy of your template and paste it into Notepad. Save this as your backup in case you make a mistake with the live template.

From the Dashboard, select the blog you wish to edit and click on the TEMPLATE tab. The formatting for your template can be found between the <style type="text/css"> tag and the </style> tag. You're looking for something like this:-

/* Content
----------------------------------------------- */
@media all {
#content {
width:660px
;
margin:0 auto;
padding:0;
text-align:left;
}
#main {
width:410px;
float:left;
}
#sidebar {
width:220px;
float:right;
}

One thing you need to keep in mind is that the sum of the width of the #main (column) and the #sidebar (column) cannot be greater than the #content. For example, the width of your whole page is 660px, 410px of which is allocated to the #main and 220px is allocated to the #sidebar.

Try changing these figures as follows: 800px for the #content; 570px for the #main and 220px for the #sidebar:-

/* Content
----------------------------------------------- */
@media all {
#content {
width:800px
;
margin:0 auto;
padding:0;
text-align:left;
}
#main {
width:570px
;
float:left;
}
#sidebar {
width:220px
;
float:right;
}

I think it is safe to say that you could increase your #content width to 1000px comfortably.

If you want to learn more about formatting your template then please check out Blogger Tricks. There are some wonderful tutorials there.

Remember to also check out the Blogger Help Group for hints & tips. There is a forum where you can post your questions and lots of very helpful bloggers from different levels willing to help newbies and experienced users alike!

In answer to your question re a 2nd sidebar on the left, you need to consider changing your template to a 3 column template. There are links for these in the left-hand sidebar under the heading "2 & 3 Column Layouts" on the Knit1BlogToo homepage. If you need assistance for this let me know and I will point you in the right direction

Regards...Bernie

4 comments:

randi K design said...

Thank Bernie! Yuo suggestions really helped me!
Randi

AiCa said...

Cheers! U save my day!! \(^-^)/

mothpete said...

Thanks Bernsie!

Was nice to widen up to a little more space. cool

Cleo said...

thanks so much - your tut on column widening was spot on ... you are a star!!