www.webdeveloper.com
Results 1 to 11 of 11

Thread: Why if all child divs are float:left, parent not stretch?

  1. #1
    Join Date
    May 2009
    Posts
    127

    Why if all child divs are float:left, parent not stretch?

    When I have no height or width set on a parent but all the child divs have widths/heights, and the child divs are "float: left" the parent does NOT stretch to fit the child divs! If I take off "float:left" it does stretch. Why? How do I fix this?

  2. #2
    Join Date
    Dec 2005
    Posts
    2,984
    Let the children float all they want to. In order to make the parent stretch, just add

    Code:
    overflow: hidden;
    to the parent container.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  3. #3
    Join Date
    Mar 2010
    Posts
    2,803
    When you float or css position elements, you are taking them out of the normal page flow.

    In this case, if the parent div has no other content apart from the floated divs, then its height will be zero.

    Another way to fix your problem is to give the parent div a height.

    Maybe use this as a template:

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    >
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    title></title>
    <
    style type="text/css">
    <!--

    #div1 {
    height100px;
    border1px solid black}
     
    #div2 {
    floatleft;
    background-colorgreen;
    width100px;
    height100px}
     
    #div3 {
    floatleft;
    background-colorred;
    width100px;
    height100px}
     
    #div4 {
    floatleft;
    background-colorblue;
    width100px;
    height100px}
     
    #div5 {
    floatleft;
    background-colorbrown;
    width100px;
    height100px}

    -->
    </
    style>

    </
    head>
    <
    body>
     
    <
    div id="div1">
        <
    div id="div2"></div>
        <
    div id="div3"></div>
        <
    div id="div4"></div>
        <
    div id="div5"></div>
    </
    div>
     
    </
    body>
    </
    html
    Last edited by tirna; 05-24-2010 at 09:38 PM.

  4. #4
    Join Date
    May 2009
    Posts
    127
    Quote Originally Posted by aj_nsc View Post
    Let the children float all they want to. In order to make the parent stretch, just add

    Code:
    overflow: hidden;
    to the parent container.
    Wow, that works! Any ideas why?

  5. #5
    Join Date
    Mar 2010
    Posts
    2,803
    Any ideas why?
    because as I explained earlier, float takes the elements out of the normal page flow, hence the height of the parent div is 0 if there is no other content in the div.

    Because there is no other content resulting in the parent div height equalling 0, then the height of the child divs is essentially 'overflowing' from the parent div. If you specify overflow: hidden (or set a height for the parent div as I did) then the parent div has to expand to the height of the child divs or the specified style height so that there is no overflow from the parent div.

    overflow: hidden or setting a height to the parent div is 2 different ways of doing the same thing and the reason they both work is as described above.
    Last edited by tirna; 05-25-2010 at 12:26 AM.

  6. #6
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428

  7. #7
    Join Date
    May 2009
    Posts
    127
    Quote Originally Posted by tirna View Post
    because as I explained earlier, float takes the elements out of the normal page flow, hence the height of the parent div is 0 if there is no other content in the div.

    Because there is no other content resulting in the parent div height equalling 0, then the height of the child divs is essentially 'overflowing' from the parent div. If you specify overflow: hidden (or set a height for the parent div as I did) then the parent div has to expand to the height of the child divs or the specified style height so that there is no overflow from the parent div.

    overflow: hidden or setting a height to the parent div is 2 different ways of doing the same thing and the reason they both work is as described above.
    Right but the reason it doesn't make sense is that usually when you do overflow:hidden, the parent doesn't stretch, instead everything outside it becomes invisible. So why with float do they force stretching instead of hiding?

  8. #8
    Join Date
    Dec 2005
    Posts
    2,984
    Doesn't make sense to me either, it just works. I don't think there's a logical reason for it to work, but it does.

    When you do overflow: hidden, the stuff outside the bounds of the container gets hidden. But you haven't specified a height on your container, so there are no outer bounds to the height of the element.

    For the record, you could also use overflow: auto or overflow: scroll for the parent to expand to fit in all the child elements.

    @tirna, you could give the parent element a height, but most people use this method when there child elements are floated and have an undetermined height and/or need to be fluid. In this case, using overflow: auto/hidden on the parent expands the parent container so it wraps everything so that you can use margin-top on elements that have to sit underneath the float and have it actually work. NOTE: If you set a margin-top of 10px of an element after a float, and specify it to clear that float (like clear: both) the margin won't be 'obeyed' because it's being applied to whatever is the nearest element in normal document flow (whatever is before the float). That sounds complicated, but hopefully you can decipher it.
    Last edited by aj_nsc; 05-25-2010 at 09:53 AM.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  9. #9
    Join Date
    Mar 2010
    Posts
    2,803
    I understand the merits of doing it using either method.

    If you needed the bottom boundary of the parent div to be below the tallest floating inner div then I would simply set a height to the parent div.

    As I said earlier when I explained how and why the 2 methods work - using overflow: hidden and setting a height to the parent div is just 2 different ways of essentially doing the same thing. The method I would choose would depend on the required page layout. The required layout was not specified by the OP.

  10. #10
    Join Date
    Dec 2005
    Posts
    2,984
    Quote Originally Posted by tirna View Post
    If you needed the bottom boundary of the parent div to be below the tallest floating inner div then I would simply set a height to the parent div.
    And when the browser is resized? Chances of the floated element changing height are really really good. Set overflow: hidden on the parent and you never have to worry about it.

    For the record you never actually explained why the two methods worked. The reason you never explained why overflow: hidden works, is because I don't believe the reason is actually known.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  11. #11
    Join Date
    Mar 2010
    Posts
    2,803
    Quote Originally Posted by aj_nsc View Post
    And when the browser is resized? Chances of the floated element changing height are really really good. Set overflow: hidden on the parent and you never have to worry about it.

    It all dependes on whether the floated elements have a fixed height or not. As I said before, the method I would choose would depend on the required layout.

    For the record you never actually explained why the two methods worked. The reason you never explained why overflow: hidden works, is because I don't believe the reason is actually known.

    Personally, the reasons why the 2 methods work make sense to me. If they don't to you or you choose to believe the reason is unknown then I don't have an issue with your opinion.
    ..

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles