When using CSS, your background color can sometimes disappear for no obvious reason. Here are 2 possibilities:
- Your webpage has been dependent on the hashless hex color quirk.
- Your webpage has <div>, or other block content, that consists of nothing but floats
I spent about a month focused on problem #2 above, totally oblivious to the fact that I had problem #1 instead. I wrote about this experience here:
Converting Quirks Mode to Standards Mode
However, I've done so much research into problem #2—the problem with divs that have zero height—that I've decided to catalog all the solutions to this problem known to me.
It's part of the CSS specification that a <div> tag that consists of nothing but floats has zero height by default. In fact, CSS specifies other zero-height boxes as well.
For example, in Section 9.4.2, Inline formatting contexts, the conditions under which a line box can be zero height is described. I quote:
Line boxes that contain no text, no preserved white space, no inline elements with non-zero margins, padding, or borders, and no other in-flow content (such as images, inline blocks or inline tables), and do not end with a preserved newline must be treated as zero-height line boxes for the purposes of determining the positions of any elements inside of them, and must be treated as not existing for any other purpose.
I've added bold-face emphasis to the above quote to emphasize zero height. Here's the original of the quote from the CSS 2.1 specification:
9.4.2 Inline formatting contexts
I count four no's in the above quote. That's a lot of no's. Why all this negation? All these no's suggest to me that a line box that has no content, other than content that is there for the purpose of being positioned elswhere, can only have a height of zero because everything that could be inside the line box is outside the box.
That is to say, the content is outside the box in that the box has zero height. Yet the content is inside the box in terms of where the content starts its positioning from. Kind of a paradox, isn't it?
Whew! When I look at it this way, it makes sense. It makes sense that a line box that is only used as a reference to position things outside itself would have no height.
Likewise, block boxes also have zero height if these same block boxesconsist of nothing but floating elements. Section 10.6.3 of the CSS 2.1 specification describes this as zero otherwise:
10.6.3 Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible'
Zero otherwise? That's not much of a description! The paragraph that follows zero otherwise does a little better:
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 block box.
What the above quite says to me is that a <div> that consists of nothing but floats will have zero height. I realize the above quote is a tough read; however, that's what is says to me.
Can we agree that block boxes that consist of nothing but floats are zero height? If so, then we can move on to the next premise.
The next premise is that there must be a way to make the height of a block box expand to include all its floating children. There is. In fact there are several ways.
Here's a quick summary of 3 different ways I've found in the past month to expand a <div> to include all its floating children in the calculation of its height:
- Place an empty <div> after all the floating content and the use the CSS clear property to clear the <div^gt; on both sides
- Change the CSS overflow property of the containing block from visible to hidden
- The weirdest one of all—use CSS to give the containing block some :after psuedoclass content
I'll start with the weirdest solution first. The uncomfortably weird (to me) :after solution is described in this article:
How To Clear Floats Without Structural Markup
The above article describes solution #3 from my list. Here's a tutorial that describes solutions #1 and 2:
Floats and clearing
I've not tried any of these solutions myself. As I pointed out in the beginning of this post, I've not tried any of these solutions because I've been barking up the wrong tree. I've sought a solution for a problem I did not have.
My motive for writing this post is I wish to document all the research I did rather than lose a month's worth of research.
It's not really a month's worth of research because I was working on many other things at the same time. I call it a month because I've gone back and forth working on this problem, and other problems, for the past month.
The solution I consider the weirdest one, the one that requires you to use the :after pseudo-class, has been updated. You might find this write-up of the solution a little bit more current:
How to use clearfix CSS to clear floats without markup
It's no wonder that the adoption of CSS has been somewhat gradual. Understanding alone can be a problem.
Ed Abbott
