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

  • WordPress › Error

    There has been a critical error on this website.

    Learn more about troubleshooting WordPress.