Expanding the parent container with 100% height to account for floated content

Question

I'm struggling with a client project. All of my divs have no absolute positioning, height:100% for html, body, and container divs, and yet the static-content stops short of its contents (at 910px).

I can change the overflow property to auto, and the background will continue down to the end of the content, but it adds a scroll bar, and the bottom border of the static-content div stays in the same place (at 910px).

UPDATE: Development link was no longer valid, so I removed it. Suffice to say that Animuson's thorough explanation is the valuable part of this thread, and solved the problem of containers not expanding to match their content. – Ty

Elseelset

-1, "this" is a broken link. – Galinagalindo

Yes. This post is a two and a half years old. – Elseelset

@TyMorton It does not matter. It has over 22,5 thousand views, and is pretty much useless to anyone reading this page. – Amends

I updated the post to reflect the fact that the development link is no longer valid. However, I disagree that the thread is useless without it. Animuson's explanation is where the real value is, and doesn't require a visual representation of the problem to be useful. – Elseelset

Answer 1

You used the wrong overflow-y property for clearing, and you should set a min-height instead of a regular height. Try this:

#static-content {
    background-color: #FFFFFF;
    margin: 0 auto;
    min-height: 100%; /* Set to minimum height so overflow doesn't get hidden */
    overflow-y: hidden; /* HIDE overflow; I know, it doesn't make much sense */
    position: relative;
    width: 960px;
}

Floating Content by Itself

Given this green box which has a padding of 20px (for visibility), notice how a single red box floated to the left will expand past the boundary of its parent box. This is because floating content doesn't actually take up any "space" in the visual area. All other elements will expand underneath it, and only text will wrap around it.

Clearing Floated Content in the Parent

In order to counter this and make the green box completely encompass the area of its child red box, we can add overflow: hidden to its styles. This will expand the box down far enough.

Expanding the Parent to 100% Height

You might think that just adding height: 100% is the simplest way to make it expand to where it needs to be.However, the height property specifies an absolute height. Since the content which is floated does not actually take up any vertical space, our overflow: hidden property will cut off all the content that goes past the parent's height.

Using a Minimum Height Instead

Since we want it to expand to at least a 100% height, we can use the min-height property to force it there and still maintain the "automatic" height needed to make the parent green box fully encompass the child red box, letting it push past the 100% only when it needs too.

How You Were Set Up

All elements, by default, are set to overflow: visible so that property didn't really change anything. The only difference you had between this and the first example I provided was that you had a height: 100% set on the element. So the parent was expanding to 100% height but still not encompassing the full height of its child red box.

Tipi

That did the trick! Can you tell me why it works that way – min-height vs. height? Thank you so much! – Elseelset

Since your content is floated, hiding the overflow will force the box down below the floated content (normally). With a normal height property, you're saying "this is the height" so the box only expands to 100%, and hides the rest of the floated content. By specifying a minimum height, it will always expand to 100%, but then be able to go past that if it needs too. – Tipi

How can it go past 100%? I understand what you're saying, but it seems counter-intuitive that telling it to make this 100% of its container, the container 100% of the body, the body 100% of the page, etc. doesn't fill it from top to bottom. I always feel like I'm missing some key element there. – Elseelset

That's what min-height does. You're telling it to be at least 100%, but it doesn't necessarily have to be 100%. Floating content doesn't take up any vertical space so before the box just expanded to the 100% and stopped because nothing actually pushed it further. – Tipi

If I just use that approach every time, will it always work, regardless of whether or not the content is floating, absolute, etc.? – Elseelset

@Ty: I've added some visuals that can hopefully help you figure it out. – Tipi

The best answer I found in my whole life in StackOverflow. Thank you!! – Bickel

Consider using PNG instead of JPG for illustrations. – Tauto

This solution seems to work perfectly (for my case) but I'm confused by the explanation. Why does overflow:hidden cause the parent to expand to the floated child's height? And why is min-height even necessary? It seems like you get the desired result with just overflow: hidden on the parent. – Leucoderma

I cannot understand this explanation because of the numerous, unclear uses of "it", causing ambiguity. Because "it" always refers to the last noun mentioned, the explanation would be clearer if the instances of "it" were replaced with the actual subject referenced. – Ar

Answer 2

If you have to use overflow:visible for some reason, there's other way to force container to stretch to contain all floated content. You have to put element with clear:both as a last container's elements. If you ignore ancient IEs (<8) you can do it with very simple css (vide https://css-tricks.com/snippets/css/clear-fix/):

.your-container:after {
  content: "";
  display: table;
  clear: both;
}

Enure

Answer 3

If height: 100% doesn't work well for you, you can try this calc function from CSS3:

/* Firefox */
height: -moz-calc(100%);
/* WebKit */
height: -webkit-calc(100%);
/* Standard */
height: calc(100%);

You can try this either with height, or with min-height, as already said. You can with this calc functions also other calculations like:

 height: -moz-calc(100% - 50px);

And this is sometimes very useful, as you might guess.

Meryl

Answer 4

height:100% is the height of the content that flows with your container at hand and is not taking into account your floated content, so that is why the height of your container is stopping short. Remove it and clear your container properly to clear your floated elements within and it will work:

#static-content:before, #static-content:aftr {
 display:table;
 content:"";
}

#static-content:after {
 clear:both;
}

#static-content {
 zoom:1; /*ie fix*/
}

Schwejda

Answer 5

You have a float in static-maincontent, which removes it from the regular flow of the content of the document, and hence static-content doesn't care about its height any more, and so won't expand to cover it. Additionally, remove height:100% for static-content.

Clubwoman

The floats are necessary. Otherwise, I'd have to position them absolutely, and that creates a whole different set of problems on other pages. Plus, I have a clearfix DIV immediately afterwards. – Elseelset

In that case you would need to manually set the height of the parent div. – Clubwoman

That doesn't work either. It's part of a CMS template, and the amount of content is going to be different every time. The solution turned out to be hiding the overflow, and changing the height to min-height. – Elseelset

Answer 6

READ FOR ANSWER!!!-- Okay so I had the same problem, All that was needed was to remove the "Positioning" Style. Should work perfectly fine.

Uuge