margin-top not working with clear: both

Answer 1

You could put the two floated divs into another one that's got "overflow: hidden" set:

  
Left
  
Right

Main Data

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

) 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.

0 讨论(0)

查看其它8个回答

发布评论:

提交评论

---

•  加载中...