disappearing background

parent div goes to 0px x 0px when last child div is floated

[daveb]

Perhaps somebody can help me with a workaround or a better method. I'd like to have a parent div with a background color that contains three more horizontally aligned divs (all floated left)
Problem is, as soon as I float the last div, the parent div goes to 0x0 and essentially disappears in my layout.

I need the child divs inside the parent div so that the parent stretches in height to match the content of the tallest child.

Sorry if I'm not clear enough. I can post a pic if needed.

Thanks.

[D_Blackwell]

One option is to give the wrapper height sufficient to wrap the floats.

Another option would be to add a clearing <div> after the last float, which will force the wrapper to extend its height to enclose this empty, but functional <div>
<div style="clear: left">
</div>

That's two. You'll probably be offered five more. LOL

[swa66]

5 more ... sounds like a challenge. Let's see how many additional ways we know how to stretch a parent to encompass floated children:

The easy ones:

1. "clearfix": basically add an :after to the parent and make it clear the floats.
   - Advantage: nothing in the html needed;
   - Disadvantage: examples most often come with a bunch of parser hacks, and since legacy IE versions don't do :after you need to fix that too, or trigger hasLayout on the parent).
   
2. float the parent itself: floats contain their floated children
   - Advantage: easiest of all
   - Disadvantage: the parent is now floated itself.
   
3. overflow (auto or even hidden) on the parent (without setting a height)
   - Advantage: cleanest around I guess
   - Disadvantage: requires a hasLayout trigger for legacy IE versions
   

[daveb]

I'll try all of the above and see which works best. Those all look like great ideas... thanks!

[daveb]

#2 is the winner. Floating the parent worked like a charm for what I needed to do. Thanks for the quick and dead-on responses.