I Still Ain’t Afraid of No Floats: Part II

After a brief introduction to floats (see Part I of “I Ain’t Afraid of No Floats”), we identified the main areas of a Web site that could ultimately benefit from the proper usage of floats. Namely, anywhere where you would like to columnular layouts or a horizontal distribution of elements.

It is worth noting that design patterns such as these can also be accomplished with clever use of negative margins; however, I find this to be rather tedious and consider floats to be the perfect way to spice up your magazine-style or divisional layout.

Now, the problem that most developers seem to have with floats is not their primitive implementation. When one wants to float and item (get it?) to the right or left of any given element - let’s say a block of text - you set the desired float property to whichever cardinal direction you would like to float it to. Simple, no?  [See Figure 1]

[ Figure 1 ]

Using floats properly and in slightly more complex situations is, unfortunately, more complicated than the above example.

How, you say?

Well, let’s take a look:

When you are floating items inside of a parent container, you are essentially removing them from the flow of your document. Therefore, this parent container will collapse and seemingly, lose its dimensional layout when such declarations are made. [See Figure 2]

[ Figure 2 ]

Now, when this collapse happens, your world may be destroyed. Well, not your world, but your layout will definitely suffer - especially if you are using a background image in your parent container or wanted your next division to appear directly beneath your floated item.

Simple clearing will not help us in this situation. Setting the clear property for a selector will only remove its ability to be wrapped around a specified float. Like the float property, you can set clear to either the left or right, both, or none.

But back to our problem: how can we get the header to retain its original, intended dimensions?

To do so, there are a handful of techniques, each with varying degrees of complexity. Below, I will walk you through my preferred method, which is an amalgamation of best practices that I’ve gathered from some of the greatest minds in Web design.

So, whenever you would like to keep a parent container from collapsing upon the floats set within, declare its class as “clearfix”, or whatever you feel like naming the CSS declarations below:

.clearfix:after {
clear:both;
content: “.”;
display:block;
height:0;
visibility:hidden;
font-size:0.1em;
}

/* for IE */
.clearfix {
display:inline-block;
}

The first clearfix declaration uses the CSS pseudo-class “after” to add a period after the content found within the parent container. This expands the parent element beyond the floated items. The period’s visibility is then set to hidden and its height to zero so that it will not mar the clean design of your layout.

Sadly, Internet Explorer does not recognize this CSS pseudo-class. Instead, we set the parent container’s display to inline-block to solve this issue. Now, don’t worry about this resetting our previous declaration as Gecko-based browsers do not recognize inline-block, and will gracefully ignore this line of code.

We’re not done yet!

What about legacy browsers, Opera, and older versions of IE on the Mac?

Well, let’s do a little CSS hack job to target those browsers specifically…

/* the following will target IE on Macs, and also fix past versions of Opera \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}

…and there you have it. Your parent container now has the dimensional layout you initially intended.

In our example, if our parent container had the ID of “header” we would just define its class as “clearfix”.

And that’s it. Be sure to store your .clearfix declarations in your external CSS file and just reference the class whenever you need to clear a parent element.

Any questions?

Jeffrey Olchovy is a Web developer, designer and marketing strategist.