Make CSS Div Width Equal To Contents

Question

Hello, I have a layout similar to:

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

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

Any suggestions?

Thanks!

Answer 1

Not knowing in what context this will appear, but I believe the CSS-style property 'float' either left or right will have this effect. On the other hand, it'll have other side effects as well, such as allowing text to float around it.

Please correct me if I'm wrong though, I'm not 100% sure, and currently can't test it myself.

Answer 2

A CSS2 compatible solution is to use:

.my-div
{
    min-width: 100px;
}

You can also float your div which will force it as small as possible, but you'll need to use a clearfix if anything inside your div is floating:

.my-div
{
    float: left;
}

Answer 3

If you need it to be the width of its child, yet still position itself like a block element you could try this:

div.containerDiv {
  text-align:center;
}
div.holderDiv {
  display:inline;
}

/* containerDiv keeps clear:both in action */
<div class="containerDiv">
    /* holderDiv will become an inline element */
    <div class="holderDiv">
      <table>...</table>
    </div>
</div>

Then again, this could defeat the purpose of div.holderDiv anyway depending on your context.

Answer 4

You want a block element that has what CSS calls shrink-to-fit width and the spec does not provide a blessed way to get such a thing. In CSS2, shrink-to-fit is not a goal, but means to deal with a situation where browser "has to" get a width out of thin air. Those situations are:

• float
• absolutely positioned element
• inline-block element

when there are no width specified. Plus, there is a table. I heard they think of adding what you want in CSS3. For now, make do with one of the above.

The decision not to expose the feature directly may seem strange, but there is a good reason. It is expensive. Shrink-to-fit means formatting at least twice: you cannot start formatting an element until you know its width, and you cannot calculate the width w/o going through entire content. Plus, one does not need shrink-to-fit element as often as one may think. Why do you need extra div around your table? Maybe table caption is all you need.

Answer 5

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 one (if you want to maintain the block behavior):

HTML:

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

CSS:

.yourdiv
{
    display: inline;
}

Answer 6

display: inline-block;

works great, in every browser except IE. Is there a simple IE fix? Or do I really need to resort to nested divs?

Answer 7

display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;

http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

Answer 8

The solution is to use < span > and set it to "display: inline-block"