Horizontal Scrolling Picture Gallery
We’ve been working on photo essays in class and figuring out creative ways to display the images on the page. The overflow property can help you create a horizontal scrolling gallery for your photos. Click through this image on the left to see my own scrolling gallery at work.
If the content inside a div goes beyond the set height and width measurements, the content will spill out of the bottom in a messy way. The overflow property helps with containing your content inside your <div> with scrollbars.
Move to your CSS sheet and type the code below. Be sure you have the #ID name correct.
I put notes in the code to explain each property. But, the most important property for a horizontal gallery is “white-space: nowrap;”. This ensures that the content inside the div will continue stacking horizontally without breaking into the next line.
And wah-lah! You have yourself a snazzy little horizontal scrolling picture gallery.
– Caily Grube