How to expand a div to its content width WHEN is it bigger than its parent?

Question

I'm trying to build a carousel. To do this, I have a parent div representing the viewport, the contents of the div containing the elements that will be displayed in the view, and an unknown number of divs representing the elements shown in the view.

<div id="viewport"> <div id="content"> <div class="item"></div> <div class="item"></div> <div class="item"></div> ... </div> </div> 

The parent and size of the elements is known in advance, but I want the size of the content to increase along with the elements. With the following CSS, the elements are displayed in the line as I want, but the width of the content will only expand until it matches its parent width.

 #viewport { position: absolute; width: 400px; height: 200px; overflow: hidden; } #content { white-space: nowrap; } .item { display: inline-block; width: 200px; height: 200px; } 

How can I expand the contents of a div to its size? Here is the JSFiddle for what I'm saying: http://jsfiddle.net/j4LnB/ (the red frame shows the size of the content).

Answer 1

You can use display: inline-block; in # content-div

Answer 2

Using min-width instead of width in the div viewport should do the trick. This allows you to expand the contents of the div to the full width of the children.

 #viewport { position: absolute; min-width: 400px; height: 200px; 

http://jsfiddle.net/j4LnB/1/