Question

I’m trying to use a known method to make my DIV centered inside another DIV horizontally, without knowing the inner DIV’s width (shrink to content method) on nested DIVs.

Here’s the HTML:

<div class="my-container">
    <div class="my-wrapper">
        <div class="item">
            <span>My Item</span>
        </div>
    </div>
</div>

Here’s the CSS:

div.my-container {
    width: 300px;
    height: 100px;
    padding: 100px 0 0 0;
    border: 1px solid #000;
}

div.my-wrapper {
    background-color: blue;
    text-align: center;
}

div.item {
    display: inline-block;
    padding: 0 20px;
    background-color: pink;
}

div.item span {
    display: inline-block;
    height: 50px;
    background-color: red;
}

Test case on jsFiddle: http://jsfiddle.net/ThZxx/2/

It looks perfectly OK in all browsers:

except Internet Explorer 7:

Looks like the pink DIV (div.item) is not shrinking to content and taking all available space in parent container.

How can i fix this?

Answer 1

It’s a problem with IE7, since it doesn’t support display: inline-block. You have to add a conditional style for IE, changing it to display: inline.

<!--[if IE 7]>
div.item { display: inline; }
<![endif]-->