The Netlobo logo - a Nevada desert landscape

Floating DIVs for Photo Gallery

How to create a photo gallery that will fit any screen size using floating DIVs

Published Sep 8, 2005 by lobo235

Photo galleries are one of my favorite things to see on the web. There are an endless amount of photo galleries to be seen on the Internet and some of them are not put together well. There are a lot of photo galleries that are created automatically from some graphics program with limited customization options. These galleries are usually created using the old table-based designs that most webmasters try to steer away from. In this article I will share a couple of secrets that I have learned through my own attempts at creating photo galleries. I will place an emphasis in following standards such as XHTML and CSS so that everything stays nice and clean.

One of the things you will encounter with almost any web page is a need to determine what screen size(s) your web page will cater to. Many webmasters choose the standard 800 x 600 screen size to prevent their pages from running off the viewable window. When creating a photo gallery you have to do the same thing, or do you? Using the methods presented here, you will be able to create photo galleries that cater to almost all screen sizes or containers you place them in. The way that this is done is by using the ever useful DIV html element.

Any photo gallery is made up of multiple photos. The DIV tag can be used to wrap each one of these photos into it's own package (or box) which can include the photo name, a description or caption, and any other details you wish to include about the photo. In our case, each DIV is going to contain a small thumbnail of the photo and the image name (file name). I have a collection of 55 photos that I took on a hike to Mount Nebo last summer. I have made a thumbnail for each photo that is at most 130 pixels tall and 130 pixels wide. This is an important step when you use the DIV method to do your photo gallery to make it appear uniform and organized. I place all the images into a folder and then using some simple PHP I can loop through all the images in that folder and create a DIV for each one that includes the thumbnail and the image or file name. The DIVs all have to be the same height and width so you get a table-like look without actually using a table.

Here is an example of how this works:

Example (opens in new window)
Example Source (opens in new window)

With the first example, try resizing the window. You will notice that the rows and columns automatically adjust to fit the container they are placed in. Now try the second example. You will notice that when you click the links to resize the container div the divs inside all adjust to fit the container. The reason that it works this way is because all of the divs use the float left CSS property. Since the divs are all the same height and width the effect that is created is a dynamic table-like presentation. This same method can be applied to product listings on an e-commerce web site or menu options, etc. Be creative and try it out on your next project or change your existing photo gallery or web page.

I appreciate your feedback. Please use the "Contact Us" link on the menu if you wish to drop us a line about this article or about the site in general.

0 comments for this article.

del.icio.us logo add this article to del.icio.us! Other great Web Development and Programming articles on Netlobo.com:
Disable Form Buttons and Other Elements with Javascript
Javascript Number Formatting
Toggle Background Color using Javascript