Question

Lets say I have this

<div class="sectionContainer">
    <div class="itemsContainer">
        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
    </div>
</div>

The css:

.itemsContainer 
{
 /* width:3000px works, however this is what I want to avoid saying explicitly.*/
}

.sectionContainer
{
width: 1000px;
overflow: auto; 
}

.items
{
width: 1000px;     
float: left;     
}

The sectionContainer has some set width.

The items has some set width.

The items container does not have a set width; it will scale to the size of its contents.
The items container’s overflow is set to hidden, so that one can scroll through the items within the div. The items within the div are horizontally displayed IE they are side-by-side, I’m currently doing this with a float.

How can I do this with CSS only? Is it possible? I’m not looking for a JavaScript solution right away but can resort to that if needed.

to be more specific, this would work if I specified the itemsContainer to have a width of 3000. But I’m guessing that since it is the child of its parent div, its width gets sized to 1000. I do not want to explicitly set the size of the itemsContainer because this should be based upon the number of items. If I add more items, I want the itemsContainer to change its width to contain all of those items without having to alter the CSS.

Thanks!

Answer 1

It’s not possible for CSS to guess what you want to happen — meaning that it wants to cascade elements downward as opposed to horizontally, which is what you want.

http://jsfiddle.net/9NHFa/

Set the itemsContainer width to a 100% X the number of elements.

.itemsContainer 
{
width:300%; /* since you have 3 elements
}