Nested DIVs shrink to content - html

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]-->

Answer 2

Change div.item to this:
div.item {
display: inline-block;
padding: 0 20px;
background-color: pink;
*display: inline;
zoom: 1;
}
Adding the * in front of the extra display style prevents other browsers from using the style. Only IE will parse it and apply it.

Answer 3

IE7 doesn't understand inline-block properly, but theres a simple hack to fix it by adding zoom:1; and *display: inline; to your css, like so:
div.item {
display: inline-block;
padding: 0 20px;
background-color: pink;
zoom:1;
*display: inline;
}
you can read more about the issue, and the fix here:
http://flipc.blogspot.ca/2009/02/damn-ie7-and-inline-block.html