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

**6tr6tr** · 05-24-2010 06:31 PM

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?

**aj_nsc** · 05-24-2010 07:04 PM

Let the children float all they want to. In order to make the parent stretch, just add

Code:

overflow: hidden;

to the parent container.

**tirna** · 05-24-2010 09:35 PM

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 {

height: 100px;

border: 1px solid black}

 

#div2 {

float: left;

background-color: green;

width: 100px;

height: 100px}

 

#div3 {

float: left;

background-color: red;

width: 100px;

height: 100px}

 

#div4 {

float: left;

background-color: blue;

width: 100px;

height: 100px}

 

#div5 {

float: left;

background-color: brown;

width: 100px;

height: 100px}



-->

</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>

**6tr6tr** · 05-24-2010 11:39 PM

Originally Posted by aj_nsc

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?

**tirna** · 05-25-2010 12:21 AM

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.

**Kor** · 05-25-2010 04:22 AM

Is this all about?
http://www.webdeveloper.com/forum/sh...d.php?t=230117

**6tr6tr** · 05-25-2010 09:42 AM

Originally Posted by tirna

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?

**aj_nsc** · 05-25-2010 09:49 AM

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.

**tirna** · 05-25-2010 05:13 PM

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.

**aj_nsc** · 05-25-2010 05:24 PM

Originally Posted by tirna

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.

**tirna** · 05-25-2010 05:31 PM

Originally Posted by aj_nsc

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: Why if all child divs are float:left, parent not stretch?

Thread Tools

Display

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

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions