Friday, June 09, 2006

How to make sidebar display on the left and main column display on the right

The default for the Blogger Minima template and most standard Blogger templates is the main column is on the left and the sidebar is on the right. This may create problems when you often post long links or wide images which may exceed the width of the main column. The long links or wide images will then extend into the sidebar and cause it to slide to the bottom of the page. (Note: Read update below). To overcome this, you may want to modify the template so that the sidebar is on the left and the main column is on the right. To do this, look for this block of codes in the template:


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



and change the text colored in red to the following:


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



Update: I have tried uploading a 550px wide photo and this caused no problem in FireFox and Opera, but caused the sidebar to slide down to the bottom of the page in Internet Explorer.

Books from Amazon

The Rational Guide to Google Blogger (Technical accuracy is assured by Biz Stone, Former Senior Specialist on the Google Blogger Team)

Blogging: Genius Strategies for Instant Web Content by Biz Stone, former Senior Specialist on the Google Blogger team

NEWER POST    OLDER POST

13 comments:

  1. Cool litle trick, but does it really affect the width of text you can post (the length of a straightforward URL before it pushes your sidebar down)?

    Have you any screen captures of this disposition and long URLS or photos poking out of the main area?

    I would have thought it would just depend still on the width given to columns. Too busy/lazy to actually try switching columns and posting long URLS, am afraid! ;-)

    ReplyDelete
  2. It works for Firefox, but not for Internet Explorer. I tried posting a wide photo and that pushed the sidebar into the bottom of the page in Internet Explorer.

    ReplyDelete
  3. I think I love you....
    (just don't tell my husband)
    I only found your page a couple of days ago, but already you have solved so many of my little problems :)
    Just thought I'd thank you! ;)

    ReplyDelete
  4. Thanks for the awesome tip! Besided the formatting issues, it's easier to read posts when they are page-right. I wonder why Blogger has the default page-left.

    ReplyDelete
  5. The reason this happens (the sidebar sliding down, that is) is because Internet Explorer is not W3C Standards-Compliant.

    IE is proprietary (remember the big legal battle a while back?), and consequently, handles some elements of CSS differently than others.

    I had the same problem with my blog, TankerBrothers.com, and found that the best way to "fix" it was to use percentages instead of pixel settings. The strange thing is that the #Main percentage had to be 97%, while the sidebar was 14%, and the main column was 79%.

    It all worked out, though, and now my blog correctly displays in all browsers.

    For the record, Firefox, Netscape, and Opera are all W3C Standards-Compliant, with Opera being perhaps the most stringent in terms of CSS rendering.

    If you can get your site to display properly in Opera, then you can be sure it will display correctly in all W3C compliant browsers.

    ReplyDelete
  6. Hi MasterGunner,

    Thanks for this insightfull comment.

    ReplyDelete
  7. My sidebar slides down tot he bottom of the page in IE but looks great in Firefox. I am worried that people using IE to view my blog will think it's all messed up. Any suggestions or tips? Thanks.

    ReplyDelete
  8. They are mostly in this post What to do when sidebar slide to the bottom of the page, Common causes are photos/videos and links that are too wide for the column width.

    ReplyDelete
  9. Hey there,

    Thanks for the tip - it works! Hurray!

    However, I do have a new issue that has now cropped up. My sidebar is now on the left but the borders along the edge of the area that encompasses my sidebar and main body are covered over near the top of my blog:

    http://steve-3posblog.blogspot.com/

    I'm using a modified version of the 'Thataway Green' template. What do I ned to modify to get the borders to show again?

    Any help would be much appreciated!

    Cheers

    Steve-3PO

    ReplyDelete
  10. Hi Steve,

    Sorry to hear about your problem. I am afraid I may not have time to look into your problem as I have many files still waiting for me in my "To do" folder and lots of emails and comments to respond to. Further, I am a retired scientist, not an IT man nor a template expert. You may have better luck posting your problem in the Google Blogger Help group.

    Another solution if you want a sidebar on the left. Use a ready made 3 column Thisway template. You can find it at New Blogger 3 column templates modified by Stavanger.

    Peter (Blog*Star 2006 and 2007)
    Testing Blogger Beta (now New Blogger)

    ReplyDelete
  11. hi peter..

    thanks for the reply.i was just going through some tutorials and happened to hit the links html that day after i posted the comment so learned how to get it as a scroll box! my problems still there and now i need to know how to get an image as a link! please help me out with this..

    i have bookmarked you from long time now and very fond of the way you expalain step by step.ive been a regular visiter and learned plenty of tricks:) thanks for being one of the best bloggers!

    ReplyDelete
  12. Hi Nisha,

    I apologise for this late response, but I had a lot of things to finish first. Anyway, please refer to How to make clickable picture, banner, photo, screenshot, etc.. If you need further help, just comment again.

    Peter (Blog*Star 2006 and 2007)
    Testing Blogger Beta (now New Blogger)

    ReplyDelete
  13. hello Peter!
    after reading your advice i found out that i cant find those lines. after some trial, i realized the same function is hidden under #main-wrapper { and #sidebar-wrapper { with float having value either $startSide; or $endSide; which are defaulted as left and right respectively.
    i checked your post is from 2006, therefore i guess things have changed since then...
    thanks anyway!

    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