Home/ Questions/Q 550943
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T11:20:30+00:00

I have the following code: <HTML> <head> <style>div{border:dashed 1px silver}</style> </head> <BODY style=background: #fff;>

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0