Why doesn't my div expand to encompass it's children?

Hi DP,

Here is the HTML and CSS of what I'm talking about:
http://jsfiddle.net/fortninja/qfpZL/15/
I am trying to make a neat little box to display a user's data.
Each user account will have a 100x100 icon to represent it.
I want the .userinfo box to have all of it's children inside of it.
But the user's icon pops out of the box.

Why is this happening?
There must be a better way to fix it than making the .userinfo box have height:100px.
In the future, when I don't know the size of the content (like the image), I don't want to experiment around with different parent element heights.

Thanks,
-Tony

 

Try adding overflow:hidden; to the .userinfo.

 

That actually worked (see http://jsfiddle.net/fortninja/qfpZL/18/), but why?
Setting overflow to hidden should just hide part of the picture, but instead the .userinfo expanded!

Why?
Also, there's some extra space below the image.

I just want the .userinfo box to fit snugly around the image.
How can I fix this and why does overflow:hidden work?

-Tony

 

Because you floated the .usericon div, when you float an element you remove from the normal document flow (the parent doesn't see it)
to fix your new issue replace
.usericon {
float:left;
}
with
.usericon img {
float:left;
}

 

It's all about creating a new block formatting context. See Enclosing float elements. (I really must update that article. IE is now standards compliant, so ignore the deserved, snide but outdated references to IE.)

cheers,

gary

 

An image's default vertical-align value is baseline. That leaves space for character descenders (think qypgj). Do

.usericon img {
  vertical-align: top;  /*or bottom*/
  }

Code (markup):

See That mysterious gap under images.

cheers,

gary

 

fix width of both section I think it will work and no need to use overflow hidden or clear class

 

That will work only on IE<8.

 

Which is ONLY because it's a haslayout trigger... which is why if you're going to use overflow:hidden for it's float wrapping behavior, it's a good idea to include some form of haslayout.

I've come to like zoom:1; for that. A lot of developers used to piss and moan about zoom being a proprietary value -- the real laugh of that being those same people were first in line for that stupid malfing vendor prefix bull. With all the -moz, -webkit, -ms garbage being entirely 'acceptable' practice, does it make any sense to say "don't use zoom for haslayout"? I think not.

 

Except that IE7 expanded the list of hasLayout triggers to include the overflow property. I've never had a problem with using 'zoom'; it's likely the safest of the triggers. However, I see only one sane reason to accommodate IE6, and that's client's making it rain big time. Otherwise zoom is superfluous.

cheers,

gary