with Lorelle and Brent VanFossen

Clearfix CSS Hack: Solving Stair Stepping Images

While I deal with this and other design issues I had with my site in the article WordPress Tips and Tricks – Template Files, Styles, and Themes, the issue keeps coming up. So I decided we needed to address it specifically.

What to do when images start shoving other images round?

Generally, we try to avoid browser hacks, but there was one in particular we couldn’t avoid. It causes floats within floats, especially those with images floated within floating containers, to fail to recognize the height of the floated image within the container and stair step or wrap itself around neighboring containers. Does that make sense?

Let’s spell it out.

One of the biggest problems I had is with floats within floats. A division with a float inside scrambles your layout in FireFox, though it looks great in MSIE. The inside floats don’t line up and when they reach the virtual “end” of the parent container, they overlap past the end and into the next container. The problem is that the float doesn’t “clear” or stop at the end of the container where it should. It needs to be told when to stop with the “clear” function, but unfortunately different browsers need different instructions to accommodate those instructions.

Example of the step stepping of image without using the clearfix hack

After playing around with this for days, here is my final fix from
Positioniseverything’s Easy Clearing.

For example, on the front page of our site, each post excerpt features a bar along the left side in green and often an image in the right side of the container with the text wrapping around the image. The image’s position is controlled with a float selector. In Firefox, since a height was not established in the parent container, it ended when the text ended. If the text went below the image, then it wasn’t a problem. But if it ended before the end of the image, the next container would then begin, stair-stepping into the container above it.

I needed to apply a “clearing” to the container so that the container below it would wait until the container above was finished, and then begin it’s positioning.

The clearfix style is as follows:

.clearfix:after {content: ".";
   display: block; 
   height: 0; 
   clear: both; 
   visibility: hidden;}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */
/* End clearfix */

In the index.php template where the excerpt or post content is displayed, I used this:

<div class="excerpt-post clearfix">
<h2 id="post-">......

The main styles of the excerpt area are controlled by excerpt-post but the addition of the clearfix style adds style instructions to the first style. You can learn more about using combination styles in our article on Understanding CSS Selectors and Attributes.

Example of the step stepping of image without using the clearfix hack

I also used this same technique in our Book Recommendations and Reviews. The ads and review section containers would begin to stair step their way as each container bumped up against the other, unable to determine the previous container’s height. I simply added the clearfix style to their styles.

<div class="clearfix books">
<img scr="blah.jpg" title="Amazon books" class="bookads" height="260" width="120">
<img scr="blah2.jpg" title="Amazon books" class="bookads" height="260" width="120">
<img scr="blah3.jpg" title="Amazon books" class="bookads" height="260" width="120">
</div>

The same technique would apply if the layout was like this:

<div class="clearfix books">Text here.
<div class="bookads">Book Ad here</div>
Text here.</div>

A lot of people blame Microsoft Internet Explorer for having the most bugs, but I did find some major bugs in other browsers.

7 Comments

  • Rasmus Østergaard Pedersen
    Posted June 22, 2006 at 2:39 | Permalink

    I quote you: “The problem is that the float doesn’t “clear” or stop at the end of the container where it should.”

    This is wrong because it actually is the intended behavior.
    Ref. http://www.w3.org/TR/REC-CSS2/visuren.html#floats

  • Posted June 22, 2006 at 10:44 | Permalink

    It’s not “wrong” as I used the word “should”. The behavior of the floats is right, but the result isn’t the one expected. The technique worked without the hack in one browser but not in Firefox, thus this hack helped force the “expected behavior” to work within the floats and DIV.

    If there is a solution to make this work without hacks, please let me know as there are many who struggle with this in CSS and all the various browsers.

  • Posted September 6, 2006 at 16:08 | Permalink

    You can change the line
    .clearfix {display: inline-table;}
    into
    .clearfix {display: inline-block;}
    to fix new problems with ie7.

    Regards,
    Michiel

  • Posted September 6, 2006 at 16:53 | Permalink

    Thanks, Michiel, but how it that backwards compatible, especially since I think it will be a long time before a lot of people will be using IE7, especially those living outside of the US. And how does inline-block work with non-IE browsers?

  • Cristian George Strat
    Posted November 24, 2006 at 20:49 | Permalink

    “especially those living outside of the US”

    I’m sorry but I fail to understand this.
    Are there any statistics about IE7 early adoption outside US vs inside US?

  • Posted November 25, 2006 at 10:48 | Permalink

    Yes, there are extensive statistics about adoption of all “current” versions of all Internet programs, software, and operating systems. As for IE7, the info is just coming in since it is so new. In a few months, the statistics will be available.

    There are still a HUGE amount of international users using Windows98 and WindowsME, as well as 800×600 screens. Many non-US users are not eagerly embracing anything Microsoft, and many also do not have legal versions of Windows, which I believe may make upgrading to IE7 a bit…cumbersome.

    Search for Internet statistics or international Internet statistics and you should find a ton of research. Forrester, Netcraft, and Iconocast are good examples of such research and surveys, to help you get started.

  • Anonymous
    Posted January 24, 2007 at 13:06 | Permalink

    “Are there any statistics about IE7 early adoption outside US vs inside US?”

    no

Post a Comment

Your email is kept private. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>