Welcome to the Hindi Tutor QA. Create an account or login for asking a question and writing an answer.
Pooja in Web Designing

I have a layout similar to:

<div>
    <table>
    </table>
</div>

I would like for the div to only expand to as wide as my table becomes.

3 Answers

0 votes
Nadira

I think using

display: inline-block;

would work, however I'm not sure about the browser compatibility.


Another solution would be to wrap your div in another div (if you want to maintain the block behavior):

HTML:

<div>
    <div class="yourdiv">
        content
    </div>
</div>

CSS:

.yourdiv
{
    display: inline;
}
0 votes
Nadira

display: inline-block adds an extra margin to your element.

I would recommend this:

#element {
    display: table; /* IE8+ and all other modern browsers */
}

Bonus: You can also now easily center that fancy new #element just by adding margin: 0 auto.

0 votes
Nadira

You can try fit-content (CSS3):

div {
  width: fit-content; 
  /* To adjust the height as well */ 
  height: fit-content;
}
...