CODEWITHSUNDEEP
htmlcss-positioncss
Tower
Tower

Reputation: 102775

inline-block messes up with relative positioning

I have the following code:

    <HTML>
<head>
<style>div{border:dashed 1px silver}</style>
</head>
<BODY style="background: #fff;">

<div style="position: absolute; background: #0f0; width: 256px; height: 96px; overflow: scroll;">

<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>

</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?

Edit: it seems to work if I remove display: inline-block, but then the scrollbars will appear horizontally (as the div takes some invisible space).

Upvotes: 3

Views: 8369

Answers (2)

Charming Prince
Charming Prince

Reputation: 489

When using "inline-block" properties, you should always start your HTML opening tag in a DTD format. placing one there should resolve this.

Upvotes: -1

Kobi
Kobi

Reputation: 137997

You should use the way position:absolute elements are displayed when inside position:relative.
In addition, to avoid the horizontal scroll bar, use overflow-y.

Working example: http://jsbin.com/uveni3

Upvotes: 1

Related Questions