Question

I’m trying to implement a simple image carousel and I can’t keep the images from dropping down to the next line. Here’s my CSS:

#gallery-wrap{margin: 0 auto; overflow: hidden; width: 532px; position: relative; float: left;}
#gallery{position: relative; left: 0; top: 0; float: left;}
#gallery li{float: left; margin: 0 20px 15px 0;}
#gallery li a img{border: 4px solid #40331b; height: 175px; width: 60px; float: left;}

#gallery-controls{margin: 0 auto; width: 732px; float: left;}
#gallery-prev{float: left;}
#gallery-next{float: right;}

Here’s my HTML:

<div id="gallery-wrap"> 

                <ul id="gallery"> 

                </ul> 
            </div> 
            <div id="gallery-controls"> 
                <a href="#" id="gallery-prev"><img src="prev.png" alt="" /></a><a href="#" id="gallery-next"><img src="next.png" alt="" /></a> 
            </div> 

I’m trying to display 5 images at a time, with the rest hidden. Then clicking on the prev and next buttons scrolls it back and forth using jQuery. Right now, when there are more than 5 images, the start dropping down to the next line instead of becoming hidden.

Answer 1

Well, yeah. If you specify a height value on #gallery-wrap, it will hide child elements beyond that height. If you don’t (and you haven’t), then #gallery-wrap will be as tall as its children need it to be.

Set a height on #gallery-wrap and you’re good to go.