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 have to clear the float after your div by adding style=”clear: left;” on your consecutive element:

<div style="float: left;">
    <table>...</table>
</div>
<div style="clear: left;">
    ...
</div>