Question

I have what I want here, however I must manually enter the width. I want to have a parent container that will hold the stretchable div that contains child divs. The parent container is a fixed size. I need the stretchable div to be large enough to horizontally contain the child divs. Setting the stretchable div to width auto does not work and I do not want to manually set the size. Is there another option besides manually setting the size?

#parent{
    width:50%;
    height:200px;
    background:red;
    overflow-x: scroll;
    overflow-y: hidden;
}

#stretchable-div{
    background:darkblue;
    /* width: 600px; works but don't want to manually size*/
    width: auto;
}

.child {
   background:blue;
   width: 100px;
   height: 150px;
   float:left;
}

Answer 1

If you need to make stretchable div auto width, it has to be decided by it’s children. Which is conflicting with children’s float property(floating behavior is decided by it’s parent width). So you have to change either of the parent’s width or children’s floating.

I can use display: inline-block and nowrap property to make the chidlren in a single row. But you have to hack inline-block under IE7.
The example is here.

Cannot find a pretty nice solution for now. Just give it for a hint.