Make centered DIV inside wide DIV expand with content width

Question

I'm using 2 divs, a parent and a child. The parent has a width of 100% and its contents are text-align'ed to center.

The child div should have a width of zero (or something close to it) and expand its width automatically with its contents, while still being centered in the parent div. Example:

+------------ PARENT DIV ------------+
|                                    |
|          ..some content..          |
|                                    |
|           +--CHILD DIV--+          |
|           |Inside child |          |
|           +-------------+          |
|                                    |
+------------------------------------+

+------------ PARENT DIV ------------+
|                                    |
|          ..some content..          |
|                                    |
|      +------ CHILD DIV ------+     |
|      |Inside child with more |     |
|      +-----------------------+     |
|                                    |
+------------------------------------+

If I put a fixed width to the child div, I can center it correctly:

.parent {
    width: 100%;
}
.child {
    width: 100px;
    margin-left: auto;
    margin-right: auto;
}

But that is not what I need, I need the child div to expand its width according to its content. So I tried using float and nowrap:

.parent {
    width: 100%;
}
.child {
    float: left;
    white-space: nowrap;
    margin-left: auto;
    margin-right: auto;
}

That works for the child itself, but then it is no longer centered as a content of the parent.

I can solve it by using Javascript, but I really prefere not to.

I've been looking around for similar questions in SO but I haven't find one that answers this situation exactly.

Can someone please throw me a light?

Thanks in advance for any comments.

Francisco

Answer 1

You can use display: inline-block; (not supported in < IE7) but you must enclose all other content in another block level element (like a <p> or another <div>)

.parent {
    width: 100%;
    text-align: center;
        border: 1px solid #000;
}
.child {
    display: inline-block;
        border: 1px solid #f00;
}

http://jsfiddle.net/4kpsK/

(Click the red bordered div to add more content and see the solution in effect.)