CODEWITHSUNDEEP
htmlcsscentercss-position
Feng Chen
Feng Chen

Reputation: 39

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

Upvotes: 0

Views: 998

Answers (1)

Hussein
Hussein

Reputation: 42818

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>

Upvotes: 1

Related Questions