Position:absolute misaligns div in Internet Explorer

Question

Position: absolute used for a div misaligns the div in Internet Explorer. But works well in Mozilla Firefox and Chrome. Can anyone suggest workaround?

Code

http://jsbin.com/uxerus/15/edit

Answer 1

The solution is to wrap the first input and the hidden div in another div, setting the "wrapper's" position to relative . Then position the hidden div absolute including the left and top css property.

For a start, see http://jsbin.com/uxerus/56/edit

Should be something like:

css:

.wrapper {
    position: relative;
}

div.first {
    position: absolute;
    top: 24px;
    left: 0;
    z-index: 10;
    width: 298px;
    border: 1px solid #000;
    background: #fff;
}

html:

<div class="wrapper">
    <input type="text" id="input" name="input" value="First div" />
    <div id="content" class="first">
        <span>option 1</span>
        <span>option 2</span>
        <span>option 3</span>
        <span>option 4</span>
    </div>
</div>