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.