CODEWITHSUNDEEP
html
Shades88
Shades88

Reputation: 8360

Make div width adapt automatically to contents within it

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?

Upvotes: 8

Views: 39865

Answers (5)

Vandervals
Vandervals

Reputation: 6064

This is quite new but...

If you don't want the element to become inline-block, you can do this:

.parent{
  width: min-content;
}

You have a lot of other options for configuring the width. Read more here: http://caniuse.com/#search=intrinsic

Upvotes: 6

svanelten
svanelten

Reputation: 483

If i understand correctly, you want the div to be as wide as the table but not any wider. Since the div-element is a block element, it will always be as wide as it can be unless you give it an explicit width. Your choice is to either add the style display:inline or use an inline-element like "span".

Upvotes: 0

Spycho
Spycho

Reputation: 7788

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.

Upvotes: 19

emboss
emboss

Reputation: 39650

You need to clear the float explicitly in order to not impair subsequent elements by the float. See this article for details.

Upvotes: 2

Reto Aebersold
Reto Aebersold

Reputation: 16644

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>

Upvotes: 5

Related Questions