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