Question

I have a parent div that has a bunch of child divs inside it. I want the child divs to be horizontally laid out beside each other. Which means the parent div can not be set to an exact width amount as the image amount will change all the time. So I presumed setting the parent div to width:100% then the children div items inside it I would float:left.

It will only work if I give the parent div a set width that matches the width of all the child divs inside it. Is there a way to have it 100% and lay the children divs out side by side horizontally inside the parent.

Answer 1

Take a look at this example fiddle – is this what you want?

Essentially, you just need to declare the following on your wrapper div, thats all

#wrapper{
 white-space:nowrap;  
 overflow:hidden; /* whatever suits you - could be scroll as well*/
}

you don’t need to float the images, as they are no block-level elements per default.