Make outer div be automatically the same height as its floating content

by

You can set the outerdiv‘s CSS to this

#outerdiv {
    overflow: hidden; /* make sure this doesn't cause unexpected behaviour */
}

You can also do this by adding an element at the end with clear: both. This can be added normally, with JS (not a good solution) or with :after CSS pseudo element (not widely supported in older IEs).

The problem is that containers won’t naturally expand to include floated children. Be warned with using the first example, if you have any children elements outside the parent element, they will be hidden. You can also use ‘auto’ as the property value, but this will invoke scrollbars if any element appears outside.

You can also try floating the parent container, but depending on your design, this may be impossible/difficult.

More Related Contents:

  1. Floating elements within a div, floats outside of div. Why?
  2. CSS Floating Divs At Variable Heights [duplicate]
  3. Advantages of using display:inline-block vs float:left in CSS
  4. How to create equal height columns in pure CSS [duplicate]
  5. Split Div Into 2 Columns Using CSS
  6. How to get Floating DIVs inside fixed-width DIV to continue horizontally?
  7. CSS text ellipsis when using variable width divs
  8. Div side by side without float
  9. CSS Floating Divs with different height are aligned with space between them
  10. Stacking DIVs on top of each other?
  11. Could someone explain this CSS code?
  12. How do you keep parents of floated elements from collapsing? [duplicate]
  13. What does the CSS rule “clear: both” do?
  14. Why doesn’t the height of a container element increase if it contains floated elements?
  15. Select elements by attribute in CSS
  16. How to prevent long words from breaking my div?
  17. How do I force a DIV block to extend to the bottom of a page even if it has no content?
  18. CSS Float: Floating an image to the left of the text
  19. Two divs, one fixed width, the other, the rest
  20. Is there a disadvantage of using `display:table-cell`on divs?
  21. Two Divs next to each other, that then stack with responsive change
  22. Make HTML5 video poster be same size as video itself
  23. How to align a div to the top of its parent but keeping its inline-block behaviour?
  24. CSS container div not getting height
  25. Bootstrap change div order with pull-right, pull-left on 3 columns
  26. Why box-sizing is not working with width/height attribute on canvas element?
  27. How do I make text bold in HTML?
  28. Center fixed div with dynamic width (CSS)
  29. Is it acceptable to use tables for forms? Or is it still more correct to use divs?
  30. How to fix Internet explorer 7 bug when using percentage widths for layout?

Leave a Comment