How to remove additional registration or margin inside an absolute block?

Question

I would like to recreate something like this illustration

And I cannot fix the indentation (or margin). Here is what I tried: http://jsfiddle.net/kl94/RZPRS/2/

.circles { background-color: red; position:absolute; right: 0; top: 0; margin: 0; padding: 0; } .circle-title { background-color: orange; position:relative; right: 0px; top: 0px; width: 80px; height: 80px; /* -webkit-border-radius: 40px; -khtml-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px; */ margin:0; padding:0; } .circle-reads { background-color: #28dd21; position:relative; right: 0px; top: 0px; width: 60px; height: 60px; /* -webkit-border-radius: 30px; -khtml-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; */ margin:0; padding:0; } 

A constraint is a red div that must be absolute to constrain the top / right parent div.

Answer 1

In this case, you can also position the other two absolute elements. You will need to give the red div a fixed height and width, since it is positioned absolute

See jsfiddle .

 .circles { background-color: red; position:absolute; height:100px; width:100px; right: 0; top: 0; } .circle-title { background-color: orange; position:absolute; left: 0px; top: 0px; width: 80px; height: 80px; -webkit-border-radius: 40px; -khtml-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px; } .circle-reads { background-color: #28dd21; position:absolute; right: 0px; bottom: 0px; width: 60px; height: 60px; -webkit-border-radius: 30px; -khtml-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } 

If you don't want the width to be indicated in two circles, you can try this. See jsfiddle . I feel that this will require as much “nanny” as setting the height and width.

Answer 2

You need to add the class to the p tags, and also set their margin and indentation to 0.

 <p class="p">TITLE</p> <p class="p">65 reads</p> 

CSS

 .p { margin: 0; padding: 0; } 

You can also add float: right; into your bottom div.

 .circle-reads { float: right; } 

Jsfiddle

EDIT: I made some more games and figured out how you want.

New script

I don’t have a specific link for them, it’s just the material that I learned over time and a lot of Google search queries when working with HTML / CSS.