Make div width adapt automatically to contents within it

Question

I have a div within which a table would lie. Now I want this div to have its width set automatically to the width of table within it.

For example:

<div>
  <table>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
    <tr>
      <td>Sample</td>
      <td>Table</td>
    </tr>
  </table>
</div>

I tried giving float: left; property to it. It works, but then it creates another problem. Whatever content is put after this div gets placed to the right of it in the empty space.

What needs to be done?

Answer 1

You are effectively attempting to change the display model of that div element, so you should change it's CSS 'display' property as follows:

div{
    display: inline-block;
}

Here's a jsFiddle demonstrating the solution.