Floating elements within a div, floats outside of div. Why?

by

The easiest is to put overflow:hidden on the parent div and don’t specify a height:

#parent { overflow: hidden }

Another way is to also float the parent div:

#parent { float: left; width: 100% }

Another way uses a clear element:

<div class="parent">
   <img class="floated_child" src="https://stackoverflow.com/questions/2062258/..." />
   <span class="clear"></span>
</div>

CSS

span.clear { clear: left; display: block; }

More Related Contents:

  1. CSS Floating Divs At Variable Heights [duplicate]
  2. Advantages of using display:inline-block vs float:left in CSS
  3. How to create equal height columns in pure CSS [duplicate]
  4. Make outer div be automatically the same height as its floating content
  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. What does the CSS rule “clear: both” do?
  12. Why doesn’t the height of a container element increase if it contains floated elements?
  13. Align elements side by side
  14. Child inside parent with min-height: 100% not inheriting height
  15. How can I center into a div?
  16. Canvas has white space at the bottom and scrolls too far
  17. How to make a floated div 100% height of its parent?
  18. Disable webkit’s spin buttons on input type=”number”?
  19. How to make fixed header table inside scrollable div?
  20. Align two inline-blocks left and right on same line
  21. Is it valid to have paragraph elements inside of a heading tag in HTML5 (P inside H1)?
  22. Float right and position absolute doesn’t work together
  23. blur of part of Background image with css
  24. CSS Float Logic
  25. Two Divs next to each other, that then stack with responsive change
  26. Make HTML5 video poster be same size as video itself
  27. How to align a div to the top of its parent but keeping its inline-block behaviour?
  28. Why box-sizing is not working with width/height attribute on canvas element?
  29. Center fixed div with dynamic width (CSS)
  30. How to fix Internet explorer 7 bug when using percentage widths for layout?

Leave a Comment