How can a parent DIV get the child DIV's width?

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>

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)

Leave a Reply

Your email address will not be published. Required fields are marked *