In the following code, I wanted the parent div to expand to the size of the child. But it doesn't work this way:

<div id="parent">
<div id="child" style="width: 500px">Child Text</div>
</div>

Instead, the parent takes 100% of the screen width and does not shrink to the width of the child. Quite a long googling revealed some interesting facts:

• div is a 'block', so it always tries to take all available width. (unlike a span which is 'inline')
• Using 'float: left' in the parent, makes it "shrink wrap" over the child, thus not trying to take all available width.
  adding 'clear: both' will prevent the float from causing the other blocks to join the same line.
• If the parent is a <td>, then the "shrink wrap" effect takes place.. (Also with <div display="table-cell"> on firefox, but not in IE)