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.

First, create a div for the gallery in the HTML sheet. ID the div something specific.
I called mine “scannergallery”. Link images via relative paths inside the div. The code should look like this: 

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

~ by Caily Grube on September 24, 2012.

One Response to “Horizontal Scrolling Picture Gallery”

  1. Caily,
    Your tutorial was easy to digest and extremely useful. Most webpages from unexperienced bloggers like myself tend to resemble ATM interfaces but scrolling galleries such as the one you have outlined offer an easy way to breathe life and vitality into a simple web page. The included screenshots are always a welcome addition as well. bravo.

Comments are closed.

%d bloggers like this: