Cascading Style Sheets.

Floats, or more accurately floated elements are a popular way to handle specific layout challenges in web development and design. Unfortunately floats are also fairly misunderstood and things become much more complex than they need to be.

Floats are simple, in fact most CSS is simple, but that is for another article or three.

I would like to run down some basic examples and discuss how we get around common pitfalls, allowing us to write leaner, cleaner and more stable code.

Real World Example

The two column layout conundrum. Blog posts are a common use of this type of utility.

The HTML may often appear like this.

Float Diagram, No CSS

<div id="wrap">
 <div id="header">
   ...
 </div>
  <div id="main-content">
   ...
 </div>
  <div id="sidebar">
    ...
 </div>
  <div id="footer">
   ...
 </div>
</div>
HTML

Then the related CSS would be something along these lines.

#wrap{
  margin: 0 auto;
 width: 940px;
}

#header{ ... }

#main-content{
  float: left;
  width: 550px;
}

#sidebar{
 float: right;
 width: 200px;
}

#footer{ ... }
CSS

Float Diagram, Floated, Not Cleared

Now this will result in the sidebar moving to the right of the wrap div, and the main-content moving to the left, allowing the two division tags to align side by side, as opposed to being stacked on top of each other as they would appear without the above CSS.

The header and footer divs will appear above and below the floated columns respectively, well, almost. The footer div will not go below the columns, in fact it will place it self directly below the header, however, child content (e.g. text) will be below the floated columns, but the actual body of the div is not, which can cause some unexpected results when the layout and content becomes more complex.

There is a way to fix this, in fact there are several ways, all of which require a little extra HTML, and some CSS, but it’s minimal and straight-forward.

First we add this to the HTML

<div id="wrap">
 <div id="header">
   ...
 </div>
  <div id="content-wrap" class="float-clear">
   <div id="main-content">
     ...
   </div>
    <div id="sidebar">
      ...
   </div>
  </div>
  <div id="footer">
   ...
 </div>
</div>
HTML

I’ve added a new div, wrapped around the #main-content and #sidebar divs, this gives us a few options, and in reality, this extra div, is almost never extraneous given the complexity of design these days.

We also need to add this small rule to the CSS.

.float-clear:after{
 content: ".";
 clear: both;
  display: block;
 height: 0;
  font-size: 0;
 visibility: hidden;
}
CSS

Float Diagram, Floated, Cleared

The way this works is it places a period (.) character directly following the last child in the parent, so in our example it places a period right after the #sidebar inside the #content-wrap. Next it applies clear: both to that period, which forces anything below it to actually flow below it. The display: block;, forces the period to be a block level element, which makes it fill the entire parent width wise. The rest is used to visually hide the period, so that it does not disrupt our layout aside from the way we intend it to.

And the best part? MSIE doesn’t require this code at all, in fact MSIE has a rendering difference which causes it to auto clear floats by default, what a neat little trait. However, MSIE will need you to to assign the following line of code to your iepatch file

.float-clear{ height: 1%; }
CSS

This gives the element has-layout, which is important for MSIE, another neat quirk.

That is pretty great right? Yes, I agree.

Well if I’m being fair, there is another completely acceptable way to clear the floats.

alternate example

#content-wrap{ overflow: hidden; }
CSS

Now while this does work, it does have some caveats and in my opinion makes for much more complex CSS down the road, and dependent on the complexity of your design, that can become a huge unnecessary headache. For instance, if #content-wrap needs to have a height applied, if #main-content or #sidebar ever get any taller than that set height, their content will be hidden at the point where their height meets the set height of the #content-wrap div.

So I hear you asking, why bother with confusing us with this alternate solution, when the first solution works well and as intended-slash-expected? Well, I find the best way to guide a person to the right solution is to show them why the alternates aren’t as good.

OK. That my friends is floats in a nutshell. I hope they are a bit less confusing now. .(JavaScript must be enabled to view this email address)?