Pup's Box Flow Hack, Rev 2

How it's done

Let's jump straight to the finished CSS. Later, I'll go into more detail about what I'm doing and why I'm doing it.

The orange boxes are divs with a class name of box. The orange boxes contain various elements such as paragraphs and preformatted text.

First, set overflow to auto. This takes care of Firefox and Opera 8+. Next, set height to 1%. This takes care of IE 5+ PC. Add two simple CSS hacks to protect IE 5 PC and Opera 5 from themselves, and you're done.

Code

div.box {
  overflow/**/: auto;
  \height: 1%;
}

View Demo

Background

Normally, only inline content flows around a floated box and the borders and backgrounds of the box next to the float is drawn as if the float isn't there. So you're left with text that flows nicely, but backgrounds and borders that run behind the floated elements. There are plenty of other people who can explain the details, so I won't bother. My job is to change this behavior using a few CSS tricks.

In a perfect world, we'd set div.box's display property to inline-block and be done with it. Inline-block is exactly what we need here, but we have to avoid it due to poor browser support. The main culprit is Firefox, whose support for inline-block--including -moz-inline-block and -moz-inline-box--is very buggy. The good news is there are other options. Let's get started.

Step 1

Set div.box's overflow property to auto to make Firefox and Opera work.

Explanation

Setting the overflow to auto establishes a new block formatting context for div.box. According to the CSS 2.1 specs, this means the element must not overlap any floats in the same context.

Code

div.box {
  overflow: auto;
}

Status

Firefox and Opera 8+ now work. Other browsers still fail gracefully, meaning the orange boxes render in their default state.

Step 2

Set div.box's height property to 1% to make IE work.

Explanation

Setting height to 1% gives div.box layout in IE, which is very similar to giving it a new block formatting context. This means it won't overlap any adjacent floats in the same context.

Code

div.box {
  overflow: auto;
  height: 1%;
}

Status

Now IE 5.5+ now works. Firefox and Opera 8+ still work. However, IE 5 PC and Opera 5 now fail catastrophically. Other browsers fail gracefully.

Step 3

Use two simple CSS hacks to fix IE 5 PC and let Opera 5 fail gracefully.

Explanation

IE 5 doesn't like an overflow of auto when used in conjunction with a height of 1%. It completely hides the content of the orange boxes. By targetting this specific browser version with a comment hack, we can make it ignore the overflow property. Simply put /**/ after the overflow property and IE 5 PC is working once again.

Opera 5 doesn't like a height of 1% at all. It renders the orange boxes only a few pixels high and all the content is overlapping and unreadable. Luckily we can specifically target Opera 5 with a simple escape character hack. Putting a backslash in front of the height property makes Opera 5 ignore it and allows it to fail gracefully once again.

Code

div.box {
  overflow/**/: auto;
  \height: 1%;
}

View Demo

Status

Working in Firefox, Opera 8+, and IE 5+ PC. Other browsers fail gracefully.

Conclusion

That's pretty much it. Just a few lines of CSS. I tried to keep the CSS compliant and forward-compatible.