Image galleries are an important component to many of our web site, especially mine. The problem is formatting them so they look right in every browser, with any content that follows so it does not wrap around the image gallery.
Based on my experience, you should start by placing each image in an unordered list. Place a span tag around each caption, size each image the same.
You then need to style the unordered list with CSS so each list item floats left and the bullets are turned off. Wrap the unordered list in a wrapper div so you can specifically control the image gallery.
HTML Code
<div id="webgallery"> <ul> <li> <img src="photos/sunflower.jpg" alt="gallery1" width="200" height="133" /> <span class="caption">Sunflower</span> </li> <li> <img src="photos/bellflower.jpg" alt="gallery2" width="200" height="133" /> <span class="caption">Bellflower</span> </li> </ul> </div>
CSS Code
#webgallery { margin: 10px; } #webgallery ul { margin: 0; padding 0; list-style-type: none; } #webgallery li { float: left; padding: 4px; text-align: center; } #webgallery img { padding: 3px; margin: 6px; } #webgallery .caption { display: block; height: 2em; width: 150px; margin-left: auto; margin-right: auto; }
Great! You have an image gallery!
So you want content under the image gallery?
Next, you add some content under the image gallery to go on with your great web page, but, alas, it wraps to the right of your image gallery!
CSS Code Fix?
You then change your definition for the gallery wrapper to make it a block tag FOR SURE! Oh, and you add a border to see what is going on.
#webgallery { clear: both; display: block !important; margin: 10px; max-width: 550px; border: solid 1px #000; }
That does not work, and you are soooo frustrated because now the border is looking like a line and the text is still wrapping.
Code Fix
The standard fix is to add a br tag after the gallery with a CSS clear rule, but that is just a bandaid for a problem with the wrapper div not seeing any enclosed content due to the floats. That is why the wrapper div collapses and allows content to wrap.
I discovered that adding the CSS property of “overflow: hidden” to the wrapper will fix the problem. This fix will solve other problems on your web site.
Final CSS for the Gallery
Continue to use the same HTML for the image gallery, but update your CSS code
#webgallery { clear: both; display: block !important; margin: 10px; max-width: 550px; border: 1px solid #000; overflow: hidden; } #webgallery ul { margin: 0; padding: 0; list-style-type: none; } #webgallery li { float: left; padding: 4px; text-align: center; } #webgallery img { padding: 3px; margin: 6px; } #webgallery .caption { display: block; height: 2em; width: 150px; margin-left: auto; margin-right: auto; }