I have two divs that are placed next to each other (jsfiddle link):
<div class="container" style="display:block;">
<div class="topLeft" style="border:1px solid red; display:inline-block;" >
<a runat="server" href="~/">IMAGE<br> IMAGE</a>
</div>
<div class="topRight" style="border:1px solid blue; display:inline-block;">
<div class="topTop" style="display:block;">%</div>
<div class="topBottom" style="display:block;">#</div>
</div>
</div>
In the example there is no problem, but in my code, the blue div is placed slightly above the red one (visual example [jsfiddle link]):
<div class="container" style="display:block; margin-top:20px;">
<div class="topLeft" style="border:1px solid red; display:inline-block;" >
<a runat="server" href="~/">IMAGE<br> IMAGE</a>
</div>
</div><div class="topRight" style="border:1px solid blue; position:absolute; margin-left:60px; margin-top:-50px; display:inline-block;">
<div class="topTop" style="display:block;">%</div>
<div class="topBottom" style="display:block;">#</div>
</div>
What could be causing this?