CSS div width - content width only..?

Question

Hi all, I'm trying to get my div to be the width of my content, I can get it working in all the other browsers except for IE, using:

div#quoteHolder {
  height: 85px;
  display: inline-block;
}

Does anyone know how to fix this in IE?

Oh and this is the html code..

<div id="quoteContainer">
  <div id="quoteHolder">
    <h2>"If you were lucky and lived in Port Melbourne, it might even be your local"</h2>
    <h3>The Age, Epicure. JUNE 22nd 2004</h3>
  </div>
</div>

Answer 1

IE has problems with a lot of display modes, see here: http://www.quirksmode.org/css/display.html. A float: left might be what you're looking for, alternatively display: inline, but then the height won't work.

Answer 2

IE supports inline-block, but only for elements that are natively inline. So, if you really want to use inline-block, you’re restricted to spans and strongs and ems, when a list or paragraph would perhaps make more semantic sense (and also degrade more nicely for non-CSS users.)

However, if you trigger hasLayout(set hasLayout=true in that element) on a block element, and then set it to display:inline, it magically becomes an inline-block in IE! By using the property hack (which I love so well), you can hide the display:inline from all non-IE browsers effortlessly.

Here’s the code, in all its brief loveliness:

display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;

Answer 3

div#quoteHolder {
  height: 85px;
  display: inline-block;
  border: #a9a9a9 1px solid;
  float: left;
}