CODEWITHSUNDEEP
htmlcss
J Spring
J Spring

Reputation: 492

Make Parent DIV the width of its children

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!

Upvotes: 0

Views: 74

Answers (3)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195992

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/

Upvotes: 0

j08691
j08691

Reputation: 207901

Two options:

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

Upvotes: 1

Paul Redmond
Paul Redmond

Reputation: 3296

Change the parent to 

display: inline-block;

http://jsfiddle.net/HT46H/

Upvotes: 2

Related Questions