Question

I want to make circles using divisions and each circle has different margin. The problem is that the div with small margin-top affects with the largest margin top for another div.

here’s the HTML:

<div class="circle size2 marginTop2"></div>
<div class="circle size1 marginTop1" ></div>

and here’s the CSS:

div.circle{

display: inline-block;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;
-ms-border-radius: 100px;
border-radius: 100px;
background: pink;
opacity: 0.3;
margin-top: 0px;

}

div.size1{
   width:120px;
   height:120px;
}

div.size2{
   width:130px;
   height:130px;
}

div.marginTop1{
    margin-top: 20px;
    margin-right:-10px;
}
div.marginTop2{
 margin-top: 140px
 } 

Here’s the code:

http://jsfiddle.net/L6gPd/

The div with small margin-top affects with large margin top.

Any explanation please?

Answer 1

If you want to place them side by side then add float:left; to div.circle.

If you inspect the element using Firebug or Chrome Developer Tools, you will see that the 2nd circle is having margin-top of just 20px but it is relative to the position of the 1st circle and not from the top of the page.