1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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

Discussion in 'CSS' started by Tony Brar, Jul 23, 2013.

  1. #1
    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.
    2013-07-23_1305.png
    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
    Tony Brar, Jul 23, 2013 IP
  2. pixelexit

    pixelexit Active Member

    Messages:
    38
    Likes Received:
    9
    Best Answers:
    1
    Trophy Points:
    53
    #2
    Try adding overflow:hidden; to the .userinfo.
    pixelexit, Jul 23, 2013 IP
  3. Tony Brar

    Tony Brar Active Member

    Messages:
    220
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    50
    #3
    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!
    2013-07-23_1357.png
    Why?
    Also, there's some extra space below the image.
    2013-07-23_1358.png
    I just want the .userinfo box to fit snugly around the image.
    How can I fix this and why does overflow:hidden work?

    -Tony
    Tony Brar, Jul 23, 2013 IP
  4. homer7

    homer7 Active Member

    Messages:
    180
    Likes Received:
    14
    Best Answers:
    3
    Trophy Points:
    65
    #4
    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;
    }
    homer7, Jul 23, 2013 IP
  5. kk5st

    kk5st Well-Known Member

    Messages:
    2,906
    Likes Received:
    191
    Best Answers:
    9
    Trophy Points:
    190
    #5
    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
    kk5st, Jul 23, 2013 IP
  6. kk5st

    kk5st Well-Known Member

    Messages:
    2,906
    Likes Received:
    191
    Best Answers:
    9
    Trophy Points:
    190
    #6
    An image's default vertical-align value is baseline. That leaves space for character descenders (think qypgj). Do
    Code (Text):
    1. .usericon img {
    2.   vertical-align: top;  /*or bottom*/
    3.   }
    See That mysterious gap under images.

    cheers,

    gary
    kk5st, Jul 23, 2013 IP
  7. maisamjohnm

    maisamjohnm Greenhorn

    Messages:
    33
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #7
    fix width of both section I think it will work and no need to use overflow hidden or clear class
    maisamjohnm, Jul 25, 2013 IP
  8. kk5st

    kk5st Well-Known Member

    Messages:
    2,906
    Likes Received:
    191
    Best Answers:
    9
    Trophy Points:
    190
    #8
    That will work only on IE<8.
    kk5st, Jul 25, 2013 IP
  9. deathshadow

    deathshadow Prominent Member

    Messages:
    5,978
    Likes Received:
    825
    Best Answers:
    144
    Trophy Points:
    395
    #9
    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.
    deathshadow, Jul 25, 2013 IP
  10. kk5st

    kk5st Well-Known Member

    Messages:
    2,906
    Likes Received:
    191
    Best Answers:
    9
    Trophy Points:
    190
    #10
    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
    kk5st, Jul 25, 2013 IP