Jon Aquino's Mental Garden

Engineering beautiful software jon aquino labs | personal blog

Saturday, March 05, 2005

Fixing "Float Drops" in the Blogger Templates

The free blogging service Blogger has a series of exquisite blog templates designed by some world-class graphic designers, like Douglas Bowman and Dan Cederholm.

Unfortunately, all of these templates are susceptible to an Internet Explorer problem called float drop, in which if the main column and sidebar column are too wide to fit side-by-side, IE places the sidebar under the main column. This is bad, because usually you want readers to see your sidebar when they first view your page, as it can contain useful information like your picture and contact info.

(Firefox does not have this problem -- it keeps the main column and sidebar column side-by-side, and if the main column contains some wide posts (like large pictures), those posts just overlap the sidebar column a little bit, which is reasonable.)

An easy way to work around IE float drop is to use absolute positioning to position the sidebar. Now "absolute" might sound like a bad thing, suggesting inflexibility. But absolute positioning is not absolutely absolute - it is relative to its container i.e. its containing div block.

For example, this blog that you are reading uses Dan Cederholm's wonderful TicTac Green template. But like the other templates, it is susceptible to IE float drop. Here are the original styles in question:

#main-content {
float: left;
width: 460px;
margin: 20px 0 0 0;
padding: 0;
line-height: 1.5em;
}
#sidebar {
margin: 0 41px 0 547px;
padding: 20px 0 0 0;
font-size: 85%;
line-height: 1.4em;
color: #999;
}

So the main column is left-floated, and the sidebar is not floated. This works normally, except when I have some particularly wide posts (big pictures or code snippets) in the main column, in which case IE pushes the sidebar underneath the main column.

The fix is to wrap the main column and sidebar in a div block (call it "content-and-sidebar"), then absolute-position the sidebar at (0, 0) - this position will be relative to the parent div block. Absolute-positioning the sidebar will force it to remain at the top of the page.

#main-content {
float: left;
width: 460px;
margin: 20px 0 0 0;
padding: 0;
line-height: 1.5em;
}
#sidebar {
position: absolute;
top: 0;
left: 0;
width: 255px;
margin: 0 0 0 547px;
padding: 20px 0 0 0;
font-size: 85%;
line-height: 1.4em;
color: #999;
}
#content-and-sidebar {
position: relative;
border-style: solid;
border-color: #e0e0e0;
border-width: 1px;
}

(A note about the style for the content-and-sidebar div block: not sure why, but you need to give it an (invisible) border. Otherwise the sidebar will simply not appear in IE for some reason.)

And voila! Problem solved. The sidebar appears where we expect it to be in IE -- at the top-right corner of the page -- even when the main column contains very wide posts.

53 Comments:

  • I know this was posted way back but I just used it and it worked GREAT. Thanks.

    By Blogger Blah Blah Blah, at 7/04/2005 4:50 AM  

  • Wow - Glad you found it useful! Yay!

    By Blogger Jonathan, at 7/04/2005 8:58 PM  

  • Thanks for this post!!!! I had a float drop problem, and I fixed it with my little or no programming skills and this post! You RULE!

    By Blogger Feisty Republican Whore, at 7/08/2005 4:02 AM  

  • Feisty - Wow! Hooray! I'm delighted - it's not an easy fix to apply, especially as different people's templates are different. Good for you!!

    By Blogger Jonathan, at 7/10/2005 9:58 AM  

  • Actually, a simpler solution is to forget floats and just do <table><tr><td></td><td></td></tr></table>

    By Blogger Jonathan, at 10/14/2005 1:08 AM  

  • I wish I would get my pages to load properly.

    Is there a template somewhere that works for all browsers properly?

    My site looks fine in Firefox, but looks like garbage in IE

    http://thestoriesyoucannottell.blogspot.com/

    Is the site

    I'd welcome any advice. Thanks

    By Blogger IncognitoJoe, at 11/19/2005 2:21 PM  

  • Hi IncognitoJoe - Your site looks fine to me on IE6. I think.

    By Blogger Jonathan, at 11/22/2005 11:26 PM  

  • Thanks for the time. Right after I posted my request, I changed to another template and spent a few hours tweaking it.

    Now http://thestoriesyoucannottell.blogspot.com/

    looks fine in both FireFox and IE.

    Thanks!

    By Blogger The Stories You Cannot Tell, at 11/25/2005 11:58 AM  

  • Yay!

    By Blogger Jonathan, at 11/25/2005 10:30 PM  

  • this is going to sound really stupid but, you can goto the html part of the template and cut and paste the sidebar section above the main section and IE suddenly reads it correctly.

    By Blogger seg, at 12/08/2005 8:35 PM  

  • Hi seg - thanks for the tip!

    By Blogger Jonathan, at 12/09/2005 7:40 PM  

  • Thank you so much. You saved my bacon! I had to tinker with the numbers to put things where they should be. And for me, the code had to go like this:

    #sidebar {
    position: absolute;
    top: 300;
    left: 0;
    width: 255px;
    margin: 0 0 0 630px;
    padding: 20px 0 0 0;
    font-size: 85%;
    line-height: 1.4em;
    color: #999;
    }
    #content-and-sidebar {
    position: relative;
    border-style: solid;
    border-color: #e0e0e0;
    border-width: 1px;
    }

    By Blogger Byronik, at 2/27/2006 7:03 PM  

  • Hi Byronik - I'm thrilled to hear that you got it fixed! Yay!!!

    By Blogger Jonathan, at 2/27/2006 9:40 PM  

  • I was thrilled too. ...until today!

    My blog looks fine to me here at http://byronik.blogspot.com. But to some people it looks like http://www.byronik.com/blog_FF1.5.gif (using Firefox 1.5) or http://www.byronik.com/blog_MSIE6.gif (using MSIE 6).

    How can this be? What can be done?

    By Blogger Byronik, at 3/02/2006 8:50 AM  

  • Hi byronic - took a look at your site - you actually have to surround your <div id="content"> and <div id="sidebar"> sections with <div id="content-and-sidebar"> like so:

    <div id="content-and-sidebar">

    <div id="content">
    ..........
    </div>

    <div id="sidebar">
    ..........
    </div>

    </div>

    By Blogger Jonathan, at 3/02/2006 9:39 PM  

  • I had a similar issue with a layout I'm working on for one of my own sites, and instead of using absolute positioning, I used overflow: hidden.

    It hides wide content, which is irritating (though I don't expect to ever have content wide enough to trigger it), but with absolute positioning, the sidebar would overlap the footer if there's a lot of stuff in it, which is simply unacceptable, as that breaks the layout completely and hides a good chunk of important navigation.

    By Anonymous Anonymous, at 3/30/2006 9:08 PM  

  • anonymous - thanks for the tip!! That may even be easier (haven't tried it yet tho)

    By Blogger Jonathan, at 3/30/2006 9:10 PM  

  • Great tip!! I skipped the main and I used from the side bar down. Also made the top 300 as not to cover up my heading

    By Blogger David, at 5/04/2006 2:09 PM  

  • Hi David - right on!

    By Blogger Jonathan, at 5/04/2006 9:43 PM  

  • aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

    By Anonymous Anonymous, at 7/12/2006 12:11 AM  

  • how to make sure that the text is wrapped after a fixed width..
    like as in the post above the text is going out of the width area.

    By Blogger userid5, at 7/12/2006 12:13 AM  

  • well i got a solution for this :)
    style=word-wrap:break-word;left:0

    By Blogger userid5, at 7/12/2006 12:51 AM  

  • Hi userid5--yeah, that's a good one to know. I believe it works in IE but not firefox

    By Blogger Jonathan, at 7/13/2006 12:17 AM  

  • Hi Jonathan, a Google search on this IE side bar drop problem led me to your site.

    My blog, http://thedailykimchi.blogspot.com has the same occuring problem in IE. I'm trying to figure out a way to fix this but I'm new to CSS and HTML. Any help you can lend would be much appreciated. Cheers!

    By Blogger Gdog, at 9/03/2006 4:23 AM  

  • Haha, what a small world. I am also from Victoria...but I'm in Korea right now!

    By Blogger Gdog, at 9/03/2006 4:26 AM  

  • Hi GDog--right on! I'll take a look at your site when I get a sec. One way to handle this is to use absolute positioning.

    By Blogger Jonathan, at 9/03/2006 12:21 PM  

  • I know I'm SOOOOOOOOO LATE on this one but you ROCK! Your tips stopped the ever annoying float problem and now my blog is good to go. YIPPEE! Some of my items are overflowing the border....do you have any suggestions on how to fix that? I'll send you an email offline.
    A million thanks!

    By Blogger Margarite Elaine, at 10/24/2006 11:21 PM  

  • Margaret Elaine - glad it helped! We'll chat about the other CSS problems offline.

    By Blogger Jonathan, at 10/25/2006 12:35 AM  

  • Can anyone help with this?
    I've tried using the code from Jon's original post, but that just layers the sidebar over the the main part...
    My blog is http://www.mattchoules.blogspot.com/

    Many thanks in advance!

    By Blogger Matt Choules, at 12/04/2006 11:55 AM  

  • (i've reverted to the last working version i had without the afore mentioned code)

    By Blogger Matt Choules, at 12/04/2006 11:56 AM  

  • Hi Matt - Let me know if it's still having issues and I'll take a look.

    By Blogger Jonathan, at 12/04/2006 9:41 PM  

  • I just fixed my site as well! Thanks! Also, do you know how to create a second sidebar?

    By Blogger nick, at 1/10/2007 2:47 PM  

  • Hi Nick - I don't know of a super-easy way, I'm afraid. To get you started, this resource may be helpful: http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

    By Blogger Jonathan, at 1/10/2007 8:06 PM  

  • Oh actually, I think Blogger may have some 2-sidebar templates. You may need to upgrade to the latest Blogger to see them. For example, see http://idomyownstunts.blogspot.com/

    By Blogger Jonathan, at 1/10/2007 8:08 PM  

  • This comment has been removed by a blog administrator.

    By Blogger Ashwini Khare, at 5/07/2007 2:48 AM  

  • Jonathan, I used the float drop fix-which solves the problem in IE but now my right column is not consistent when viewing in safari or firefox-what can i do?

    Here’s the site: www.homebirthexperience.com
    Thanks!

    By Blogger Cindi, at 9/11/2007 10:22 AM  

  • Hi Cindi - Looks fine to me on Firefox - http://farm2.static.flickr.com/1402/1363334595_af715f06ee_m.jpg - would you post a screenshot of what you are seeing on Firefox/Safari?

    By Blogger Jonathan, at 9/11/2007 8:57 PM  

  • Thank you Jon! This helped alot for my blog:

    http://hiphopisread.blogspot.com/

    By Blogger Ivan, at 12/14/2007 10:01 PM  

  • Hi Ivan - Glad to hear you were able to fix it!

    By Blogger Jonathan, at 12/15/2007 9:58 AM  

  • Apparently I'm not the only one who's recently noticed this problem.

    I'm using the Rounders template in Blogger and my sidebar is dropping down in IE as well. Firefox, of course, is fine. I've not been able to figure out how to apply the code that Jonathon suggested. Any suggestions?

    idiotscollective.blogspot.com

    By Blogger Aaron, at 12/16/2007 1:47 AM  

  • Hi Aaron - Adding the following seems to fix the issue in IE6 (I'm don't fully understand why):

    * html #sidebar { /* IE6 only */
    position:absolute;
    }

    By Blogger Jonathan, at 12/16/2007 2:18 PM  

  • btw my comment to Aaron above applies to the Rounders template.

    By Blogger Jonathan, at 12/16/2007 2:18 PM  

  • Thanks a bunch for the rapid reply. That bit of code seems to stop the sidebar from dropping down in IE, but the dimensions of the boxes - and their distance from each other - is now a bit askew. In any event, though, it's better than it was before.

    Thanks

    By Blogger Aaron, at 12/16/2007 9:13 PM  

  • Actually, I posted too soon. Applying that code improved things a bit in IE, but it destroyed the appearance in Firefox. Hmmm...

    By Blogger Aaron, at 12/16/2007 9:18 PM  

  • Hi,

    I just found out through a reader that my right sidebar drops to the bottom of the page when viewed in firefox! I used the online 'browsershots' tool to check about other browsers and found out that the sidebar remained at its place only in few browsers (like Safari). It works perfectly fine on my laptop.

    Will really appreciate if you could take a look and let me know what you think might be the issue.

    P.S: My knowledge of html is quite basic :(

    Thanks!
    An Indian Summer

    By Blogger Bhavna, at 3/29/2008 11:32 AM  

  • Hi Bhavna:

    Try changing

    #sidebarRight-wrapper {
    margin-right: 2%;
    width: 23%;

    to

    #sidebarRight-wrapper {
    margin-right: 2%;
    width: 22%;

    By Blogger Jonathan, at 3/29/2008 4:14 PM  

  • I'm having some trouble fixing mine. Here is what I have:
    */

    body {
    font: $bodyFont;
    text-align: center;
    margin: 0px;
    padding: 0px;
    color: $textColor;
    background: $bgColor;
    }

    #page {
    text-align: left;
    width: 790px;
    margin-top: 20px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    background-image: url(http://i32.tinypic.com/2im84ma.jpg);
    background-repeat: repeat-y;
    }

    #header {
    height: 180px;
    margin: 0px;
    padding: 0px;
    background-image: url(http://i25.tinypic.com/oqjgqt.jpg);
    background-repeat: no-repeat;
    }
    .narrowcolumn {
    width: 520px;
    float: left;
    padding-left: 10px;
    }
    #sidebar{
    font: $SBFontSize;
    width: 220px;
    position: static;
    top: 0px;
    color: $SBtextColor;
    background-color: $SBbgColor;
    border: 1px solid $SBbdColor;
    padding-top: 0px;
    padding-right: 4px;
    padding-bottom: 0px;
    padding-left: 4px;
    margin-left: 530px;
    }
    #sidebar a {
    color: $SBLinkColor;
    }
    #sidebar .widget {
    margin-bottom: 1em;

    }

    #sidebar .widget-content {
    margin-top: 5px;
    margin-right: 0px;
    margin-bottom: 5px;
    margin-left: 0px;
    }
    #sidebar h2{
    font-size: 12px;
    font-weight: bold;
    color: $sidebarTitleTextColor;
    font: $SBTitleFont;
    background-color: $sidebarTitleBgColor;
    margin-top: 5px;
    margin-right: 0px;
    margin-bottom: 5px;
    margin-left: 0px;
    padding: 4px 5px;
    }
    #kotakkanan{
    margin: 0px;
    }
    #kotakkanan1{
    margin: 0px;
    }
    #footer {
    padding: 0px;
    width: 780px;
    clear: both;
    height: 115px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    color: $footrTextcolor;
    background-image: url(http://i26.tinypic.com/2v27aqt.jpg);
    }
    #footer a {
    color: $footrTextcolor;
    }

    #footer .widget {
    margin: 0px;
    padding-left: 20px;
    font-size: 10px;
    text-align: center;
    }

    By Blogger ChiByr1, at 3/31/2008 7:37 AM  

  • Hi ChiByr1 - I would need to see your blog so I can play with it. But it looks like it is invite-only.

    By Blogger Jonathan, at 3/31/2008 8:23 PM  

  • Okay, Thanks this worked, but when I view a post (because the center column is smaller) my sidebar overlaps the footer, my sidebar styles are

    #sidebar-data {
    width: 270px;
    //float: left;
    color: #BFBFBF;
    margin-left: -270px;
    position: absolute;
    top: 300;
    left: 950px;
    margin-top: 10px;
    background: transparent;
    text-align: left;
    font: $sidebarfont;
    font-size/* */:/**/small;
    font-size: /**/small;
    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 */
    }

    #sidebar-wrapperL {
    width: 160px;
    float: left;
    margin-left: -950px;
    margin-top: 0px;
    background: transparent;
    color: $sidebartextcolor;
    font: $sidebarfont;
    font-size/* */:/**/small;
    font-size: /**/small;
    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 */
    }

    My site is at http://www.DoubleAStudios.com

    By Blogger adubtheengineer, at 9/11/2008 5:57 PM  

  • Hi Jonathan, my blog is indianmovieclub.blogspot.com. It works fine in Firefox and IE7, but it is a disaster in IE6. first the left side bar and then the content and then the right side bar.

    Please help me in this regard.

    By Blogger J2EE Tutorial, at 10/01/2008 5:24 PM  

  • Hi dude,

    When I created my blog, I played a bit with the HTML (minima lefty stretch) and added a third column on the right... Everything was working smoothly for about 7 months, when two weeks ago the Middle column (the one containing the actual post) started to appear alligned exactly BELOW the Left column... and the Right column followed as well, appearing next to it (way down the page, but at least aligned correctly, to the right of the page)

    Its as if something is pushing everything except the Left column down... I have no idea what is causing this, and I would very much appreciate if you (or anyone else) could help...

    (note: I tried changing some thing like you said:

    #main-wrapper {
    position: absolute;
    top: 0;
    left: 50;
    margin-right: 1%;
    width: 50%;
    float: left;
    display: inline; /* fix for doubling margin in IE */
    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 */
    }

    #sidebar-wrapper {
    position: absolute;
    top: -40;
    left: 0;
    margin-right: 1%;
    width: 25%;
    float: left;
    display: inline; /* fix for doubling margin in IE */
    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 */
    }

    #sidebarRight-wrapper {
    position: absolute;
    top: -40;
    right: 0;
    margin-right: 1%;
    width: 12%;
    float: right;
    display: inline; /* fix for doubling margin in IE */
    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 */
    }

    but the MAIN central column does not respond...

    the address is:
    http://my-daily-laughing-dose.blogspot.com/

    thanx so much

    alex

    By Blogger Alexis, at 10/03/2008 10:09 PM  

  • Thank you for this! I've tried several...less drastic...solutions to the float drop problem but my end users kept breaking the page regardless. This looks bulletproof.

    By Anonymous Anonymous, at 4/03/2009 9:19 AM  

  • Glad it worked for you!

    By Blogger Jonathan, at 4/03/2009 10:11 PM  

Post a Comment

<< Home