margin-top under a floated div css

Question

I have a div under a float:right div. For some reason, the top margin cannot be applied to the first div. here is the css

#over{
  width:80%;
  float:right;
  color:#e68200; 
 }

#under{
  clear:both;
  background:url(../images/anazitisi.png) no-repeat;  
  margin:10px auto; /*does not work!!!*/
  width:95px;
  height:20px;
 } 

does anyone know what's going on?

Answer 1

Floated things are kind of floated out of the normal layout, so generally don't affect other things that aren't floated like them. Of course the float behaviour in different browsers differs, but that's the general idea.

After the floated div you'd need something (like an empty div) that will clear the float (has style="clear:both;").

However, like I said, browser behaviour will still vary, on where it then decides the margin should be counted from. There are of course workarounds for that. See this page for more on that.

Answer 2

I believe this to be the normal behavior according to the specs.. read: http://www.w3.org/TR/CSS21/visuren.html#propdef-clear

Also look at this page for examples: http://www.brunildo.org/test/margins_clear.html

Answer 3

try this css snipe, i think this will solve your problem.

  #over{
  width:80%;
  float:right;
  color:#e68200; 
  background-color:#234fdd;
  height:auto;
  margin-bottom:30px;
}

#under{
 clear:both;
 background:url(../images/anazitisi.png) no-repeat;  
 margin:auto;
 width:200px;
 height:20px;
 background-color:#23ffff;
}