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

by

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.

Example 1

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.

Example 2

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.

Example 3

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.

Example 4

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.

Example 5

More Related Contents:

  1. Could someone explain this CSS code?
  2. What does the CSS rule “clear: both” do?
  3. Floating elements within a div, floats outside of div. Why?
  4. How to float 3 divs side by side using CSS?
  5. CSS Floating Divs At Variable Heights [duplicate]
  6. Advantages of using display:inline-block vs float:left in CSS
  7. Why does overflow: hidden have the unexpected side-effect of growing in height to contain floated elements?
  8. How to create equal height columns in pure CSS [duplicate]
  9. Aligning two divs side-by-side [duplicate]
  10. How to vertically middle-align floating elements of unknown heights?
  11. Why does CSS float not change the width of the following div?
  12. Make child visible outside an overflow:hidden parent
  13. Float right and position absolute doesn’t work together
  14. margin-top not working with clear: both
  15. Make outer div be automatically the same height as its floating content
  16. Why “overflow: hidden” clears a float?
  17. Split Div Into 2 Columns Using CSS
  18. How to get Floating DIVs inside fixed-width DIV to continue horizontally?
  19. CSS text ellipsis when using variable width divs
  20. Make floating child visible outside an overflow:hidden parent
  21. CSS container div not getting height
  22. Div side by side without float
  23. Bootstrap change div order with pull-right, pull-left on 3 columns
  24. How do I keep CSS floats in one line?
  25. CSS to stop text wrapping under image
  26. Creating CSS3 Circles connected by lines
  27. How to fix Internet explorer 7 bug when using percentage widths for layout?
  28. CSS Floating Divs with different height are aligned with space between them
  29. Stacking DIVs on top of each other?
  30. CSS: clean solution to the margin collapse issue when floating an element

Leave a Comment