Kai 0

Hi,

I have the following code:

<HTML>
<BODY style="background: #fff;">

<DIV style=" display: inline-block;position: relative;top: 64px; left: 32px;">
<DIV style="width: 18px; height: 14px; float: left; background: #f00;"></DIV>
<DIV style="float: left">First</DIV>
<div style="clear: both;"></div></DIV>

<DIV style=" display: inline-block;position: relative;top: 96px; left: 32px;">
<DIV style="width: 18px; height: 14px; float: left; background: #0f0;"></DIV>
<DIV style="float: left">Second</DIV><div style="clear: both;"></div></DIV>

</BODY>
</HTML>

The second div isn't positioned on the 32 x position unless I remove the display: inline-block property, which I need. Is there a way around this?

1 answer

o.k.w 2355
0
points

I suppose you want the both root div to be aligned? There are a few methods to achieve the same result. Have you tried using position: absolute and tweak the top value?

Answered almost 7 years ago by o.k.w