html - two div boxes [1st float, 2nd clear], margin on 2nd doesn't seem to push off first -


in code below have 2 div boxes. first float:left, second has clear:left sits below first. question why margin-top:20px not push off first div?

<head>  <style>  div { width:100px; height:100px; background-color:green; }  #box1 { float:left; }  #box2 { background-color:red; clear:left; margin-top:20px; }  </style> </head> <body>  <div id="box1"></div>  <div id="box2"></div> </body> 

yeah, it's confusing. read css spec on collapsing margins.

specifically,

"if top , bottom margins of element clearance adjoining, margins collapse adjoining margins of following siblings resulting margin not collapse bottom margin of parent block."

to effect you're looking need apply margin element doesn't have clearance, in case first div, this:

http://jsfiddle.net/6bfyu/


Comments

Popular posts from this blog

c# - SVN Error : "svnadmin: E205000: Too many arguments" -

c++ - Using OpenSSL in a multi-threaded application -

All overlapping substrings matching a java regex -