Make Parent DIV the width of its children

Question

Im trying to make a parent div the width of the child elements within it without setting a fixed width. However, sofar I have no luck.

The element I need sized sits within a 'content container' which has no width defined and thus is the width of the page.

I have put it into a fiddle ( http://jsfiddle.net/8LfsW/ ) and the 'content-container' has a width set so as to emulate it being viewed on a larger screen. You will see that the 'mag-details' container is rather larger than the content within it.

The .content-main style used live is:

.content-container{
    font-family:"helvetica neue",helvetica,arial;
    margin:auto;
    margin-top:20px;
}

and the mag details style

#mag-details{
    margin:auto;
    background:#FCFCFC;
    border:1px solid #CCCCCC;
    border-radius:8px;
    max-width:1200px;
    box-shadow:1px 1px 2px #CCCCCC;
}

If someone could advise me how and if possible to size the mag-details container to the size of the content within it that would be much appreciated. Many thanks in advance!

Answer 1

Change the parent to

display: inline-block;

http://jsfiddle.net/HT46H/

Answer 2

Two options:

1. float:left . jsFiddle example
2. display: inline-block . jsfiddle example

Answer 3

I would remove the floats and use inline-block on those elements.

Then use white-spane:nowrap on the wrapping element so they do not break when screen is too small..

So add

min-width:100%;
display:inline-block;
white-space:nowrap;

to the #mag-details and change the li elements to display:inline-block

Result at http://jsfiddle.net/gaby/54kjf/