Overlap of icons without absolute in HTML5 - css

Question

I have the following snippet to render an icon overlapped with another. The whole div is a link. Currently I'm using position:absolute and adjusting the overlap. How can I do it without the absolute position. I also want the whole div on the right side of the screen (currently its on the left).
.btn-circle {
position: absolute;
top: 4px;
left: 25px;
width: 30px;
height: 30px;
line-height: 30px;
background: red;
border-radius: 50%;l
}
.count {
position: absolute;
top:8px;
left:38px;
font-size:16px;
font-weight: bold;
color:white;
}
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<div class="">
<a href="#">
<i class="fa fa-inbox fa-2x"></i>
<span id="red-circle" class="btn btn-circle"></span>
<span id="toDosCount" class="count">9</span>
</a>
</div>

Answer 1

You can still use absolute positioning alongside float: right if you make the containing div have position: relative
This makes the absolute positions of the inner spans relative to the div rather than the page.
A few tweaks to the top and right/left values and:
.btn-circle {
position: absolute;
top: -4px;
right: -4px;
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
}
.count {
position: absolute;
top: -4px;
right: -1px;
font-size:16px;
font-weight: bold;
color:white;
padding: 2px;
}
.wrapper {
float: right;
position: relative;
margin-right: 100px;
}
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<div class="wrapper">
<a href="#">
<i class="fa fa-inbox fa-2x"></i>
<span id="red-circle" class="btn btn-circle"></span>
<span id="toDosCount" class="count">9</span>
</a>
</div>
I also nudged the whole thing to the left a little so it wasn't obscured by the snippet FULL PAGE

Answer 2

Either you need to position it correctly or reduce the font size:
Snippet
.btn-circle {
position: absolute;
top: -15px;
right: 0;
width: 15px;
height: 15px;
line-height: 15px;
background: red;
border-radius: 50%;
}
div a {position: relative;}
.count {
position: absolute;
top: -15px;
right: 5px;
font-size: 10px;
font-weight: bold;
color: white;
text-align: center;
}
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<div class="">
<a href="#">
<i class="fa fa-inbox fa-2x"></i>
<span id="red-circle" class="btn btn-circle"></span>
<span id="toDosCount" class="count">9</span>
</a>
</div>
Does this work for you?