margin-top not working with clear: both

by

You could put the two floated divs into another one that’s got “overflow: hidden” set:

<div style="overflow:hidden">
  <div style="float: left;">Left</div>
  <div style="float: right;">Right</div>
</div>
<div style="clear: both; margin-top: 200px;">Main Data</div>

edit — To add a bit to this 5-year-old answer: I think the cause of the confusing behavior is the somewhat complicated process of margin collapse. A good trick with the original HTML from the OP is to add a CSS rule like this:

div { border: 1px solid transparent; }

Poof! Now (without my additional <div>) it works fine! Well, except for that extra pixel from the borders. In particular, I think it’s a combination of the way that clear: both works and the margin collapse rules that result in the unexpected layout from the code in the OP.

edit again — For the complete (and, I think, completely accurate) story, see Mark Amery’s excellent answer. The details have some complexity that this answer glosses over.

More Related Contents:

  1. Could someone explain this CSS code?
  2. How to Create Grid/Tile View? [duplicate]
  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. Make outer div be automatically the same height as its floating content
  15. Why “overflow: hidden” clears a float?
  16. Split Div Into 2 Columns Using CSS
  17. How to get Floating DIVs inside fixed-width DIV to continue horizontally?
  18. CSS text ellipsis when using variable width divs
  19. Make floating child visible outside an overflow:hidden parent
  20. CSS container div not getting height
  21. Div side by side without float
  22. Bootstrap change div order with pull-right, pull-left on 3 columns
  23. Expanding the parent container with 100% height to account for floated content
  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 horizontally center a floating element of a variable width?
  28. How to fix Internet explorer 7 bug when using percentage widths for layout?
  29. CSS Floating Divs with different height are aligned with space between them
  30. Stacking DIVs on top of each other?

Leave a Comment