Margin-top under floating div css

Question

I have a div under float: right div. For some reason, top margin cannot be applied to the first div. here is 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 is going on?

Answer 1

Floating things seem to float out of the normal layout, so they usually don’t affect other things that don’t swim like them. Of course, the behavior of the float in different browsers is different, but the general idea.

After the floating div, you need something (for example, an empty div) that will clear the float (has the style = "clear: both;").

However, as I said, the behavior of the browser will still change when it then decides which field to count from. Of course, workarounds for this. See this page for more details .

Answer 2

Solution without additional <div>

What you see is the problem of folding vertical fields in CSS3. This problem will be more easily resolved with the advent of CSS4. At the same time, it is not a good idea to add an extra <div> as much as possible. It's usually best to keep content and presentation strictly separate.

This is how I solved this problem on my website . The solution uses the absence of a collapse of the vertical edge inside the embedded blocks.

#under must contain at least the following elements:

 #under { clear: both; display: inline-block; width: 100%; } 

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; }