There are four <div>'s in this page, each with four <div>'s nested inside. A different style is used on each. It was the behavior of the second one in mozilla that confused me. When all the elements were floated, it had no height. It turns out that this is the prescribed behavior. (IE 6 follows the spec on the height, unlike 5.5, but doesn't recognize the > direct child selector or the white-space: pre property, so the page still isn't right there.) From the css specification:

Only children in the normal flow are taken into account (i.e., floating boxes and absolutely positioned boxes are ignored, and relatively positioned boxes are considered without their offset). Note that the child box may be an anonymous box.

The behavior that I wanted I get from the fourth one using display: inline.

One
Two
Three
Four
One
Two
Three
Four
One
Two
Three
Four
One
Two
Three

body { background-color: rgb(233, 222, 237); font-size: 14pt; } .style { white-space: pre; } body > div { margin-bottom: .5em; border: thin blue dashed; } div div { border: thin gray dashed; }

.one { background-color: rgb(255, 222, 209); } div.one div { width: 25%; }

.two { background-color: rgb(185, 255, 205); } div.two div { float: right; }

.three { background-color: rgb(209, 222, 255); } div.three div { display: compact; }

.four { background-color: rgb(255, 205, 139); } div.four div { display: inline; } div.four input { width: 35%; border: thin solid; }