Blogger Hack: Three Columns, Any Browser

This is so simple to do! I thought it would be hard, confusing and frustrating. But I found the initial info on Blogger Widget and Tips-Tricks, and then made a few changes to make it work for any brower size.

First I switched my test blog to the Minima template. Followed each of the steps in his post. Then I made some changes to his additions:

Step one:

#sidebar-wrapper {
width: 220px; (I changed 220px; to 25%;)
float: right;
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 */
}

Step Two:

#newsidebar-wrapper {
width: 220px; (I changed 220px; to 25%;)
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 */
}

Step Three:

#outer-wrapper {
width: 850px; (I changed 850px; to 100%;)
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

Then I found & changed the following:

#main-wrapper {
width: 410px; (I changed 410px; to 46%;)
float: $startSide;
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 */
}

and also:

#header-wrapper {
width: 660px; (I changed 660px; to 90%;)
margin:0 auto 10px;
border:1px solid $bordercolor;
}

and finally:

#footer {
width:660px; (I changed 660px; to 100%;)
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;

It's perfect! Now to try it here on this blog...