Question

I have an image slider / viewer in which an absolutely positioned div containing a bunch of images sits inside a relative div of a fixed width. The problem is that the images appear one below another inside the absolutely positioned div, instead of next to each other horizontally – even though they are given the property float:left; – How do I prevent them from wrapping (similar to how you prevent text from doing so via the no-wrap property? Can I give the absolutely positioned div a width property that encompasses all of its elements without calculating that width via javascript? Here’s code:

<div id="homeSlider" style="width:800px; position:relative;">
    <div id="homeSlides" style="position:absolute;">
        <img class="homeSlide" src="images/temp-portfolio.jpg" alt="Portfolio Item"/>
        <img class="homeSlide" src="images/temp-portfolio.jpg" alt="Portfolio Item"/>
    </div>
</div>

Answer 1

The easiest thing to do (if possible in your case) is to set the img items to display: inline-block and then set the homeSlides to have white-space: nowrap, and avoid float all together.

See fiddle.