I'm trying to center some elements with absolute positioning within a container. I've found a solution that works in most browsers, except for IE7. In IE7, the width of one of the elements shrinks to 0 even though it's specified in the CSS. The other element behaves as expected. Why is IE7 not honoring the width style for this block element? Is there a workaround or fix available for this issue?
<div style="position: relative; width: 500px; height: 400px; border: thin dotted green;">
<div style="position: absolute; top: 0px; left: 50%; height: 0px;">
<div id="item1" style="position: relative; display: inline-block; left: -50%; border: thin dotted green; width: 300px; height: 30px;"></div>
</div>
<div style="position: absolute; top: 50px; left: 50%; height: 0px;">
<input id="item2" type="button" value="Button" style="position: relative; display: inline-block; left: -50%;">
</div>
</div>
I've created a jsfiddle page with the above code. Any insights or solutions are appreciated. Thank you.