Have you ever floated something to a side and wondered why the outer element did not increase its height? That is probably because the outer element had a visible overflow instead of non-visible overflow. When it does have a non-visible overflow (the overflow property does not compute to visible) the height of the element is based on its descendents. The latest available of CSS 2.1 defines it:
In addition, if the element has any floating descendants whose bottom margin edge is below the bottom, then the height is increased to include those edges. Only floats that are children of the element itself or of descendants in the normal flow are taken into account, e.g., floats inside absolutely positioned descendants or other floats are not.
So when you set an overflow attribute property with a value of auto to the outer DIV element things will probably work just fine and you will not have to worry about doing it with generated content.
If the previous set of paragraphs sounded like nonsense to you I have a surprise, a little demonstration:
Great, but what about Internet Explorer?
Have fun. (For those few curious people among us. This thought process started this weekend at Simple Clearing of Floats by Roger.)
So when you set an overflow attribute
You mean overflow property, right?
What I'd like to know, is why this is only now becoming common knowledge?
Jim, sorry about that. I should get to bed earlier.
hemebond, I think nobody tried it till now or so or read the specification carefully enough.
Thanks so much, Anne, for this. I'm sure a lot of developers moving to CSS have had problems with that behavior.
While trying the technique, I cried victory... too soon. I always test in Opera first and then adapt. I was in for a bad surprise in Firefox.
I set up an example here: wcmi.free.fr I am not entirely sure if it's my code or if it's a real problem in Firefox.
I think that is bug 233078.
I'd take out this...
div#content { _height: 1%; blah blah blah }... and replace it with this, which validates and is slightly more obvious:
div#content { blah blah blah } * html div#content { height: 1%; }
BTW congratulations - I'm utterly gobsmacked (amazed) at this; I've been playing with floats for years and I never saw this before. It's so much better than sticking <div style="clear:both"></div> all over my HTML. Thank you!
(PS XHTML in comments? Weird! I was stuck trying to figure out what's XHTMLish for the <tt> tag in that last paragraph, so I had to use <strong>...)
There is a CODE element suited for that. In fact, I will correct your comment in a minute ;-)
ghola, I filed a separate bug that describes your problem. Although it looks similar to the one mentioned earlier I think they are different.
Nice one, this makes coding floats so much simpler!
But I second Eric's opinion, I too prefer the * html IE-hack for it's greater visibility and validation.
Anne, it seems even spookier than doubling padding-right. I just tweaked the stylesheet to have non-equal and odd-numbered values for the padding on each side. The resulting "margin" is neither double padding-right, double padding-left, or the addition of the 2. I'm trying to figure it out.
Anyway it's a very particular combination of elements and CSS that triggers that bug. Setting overflow to auto is still a life-saver in many situations, and I'll be able to eradicate a lot of my shameful hacks.
Giddy Up!
So the difference between this and the original test case at Sitepoint is that you hacked for IE?
Over at my place, Philippe reports that, as simple as this is, it doesn't work everywhere. I wonder if the forums over at Sitepoint, where this was discovered, have more complete test cases on this...
Goddamn you have a small comment writing window - how about setting a % width on it?
Is no-one concerned about IE/Mac, which correcly implements height?
I would use /* \*/ * html #content {height:1%} /* */
I would like to point out that Example 002 and Example 003 are not rendered correctly in Opera 7.54u2.
Is no-one concerned about IE/Mac
Not really...
I think that using width: 100%; (or indeed any declared value for width except auto) instead of _height: 1%; (or your hack of preference) on your containing element makes this work in Opera 7 and WinIE.
Opera 6 isn't having it, though.
Indeed, using width:100%; also makes it work in Opera 7.54 as well as Win/IE5+. I think we have a winner here!
The way I usually get around this is to float the container, and set its width to 100% so that nothing wraps around it.
A floated container expands to surround floated descendants, and that's true cross-browser without any CSS hacks.
But still, another tool in the box is always welcome, so thanks. :-)
(The floated container trick isn't mine - it was revealed by either Eric Meyer or Jeffrey Zeldman I think.)
Opera 7.54 does not work with examples 2 and 3.
I just tried this on a page I'm working on, and Win/IE6 gives a scrollbar.
IE 5.x on Windows renders example 3 incorrectly. I don't think I'll be using this much.
Már and others. You should really read the comments.
The height variant doesn't seem to work in IE/win with a HTML 4.01 Transitional dtd, but it does with HTML 4 and xhtml.
Using width instead of height fixes this however
…
Wer’s gerne nachmachen möchte, schaut am Besten auf Anne’s Weblog about Markup & Style nach.
Thanks for this very useful info, Anne! ^_^
Anne, thank you very much for journalling about this.
Great! So, Russian note about this available now.
P.S. Tnx a lot!