Need help horizontally centering an absolute positioned DIV

I need to center some absolute positioned elements relative to a container. After reading numerous articles, it seems a structure like following will do the job. The only problem is with IE7. Somehow th开发者_开发知识库e width of item1 (div element) shrinks to 0 (even though width is explicitly specified on it) on IE7. item2 works fine in all browsers. My question is why the width style for block element is not honored by IE7 in this situation? Do you know any workaround or fix?

<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 made a jsfiddle with above code. Thanks for your input.

---

Add min-width=300px; so the line of code looks like

<div style="position: relative; display: inline-block; left: -50%; border: thin dotted green; width: 300px;min-width:300px; height: 30px;"></div>