Simple Image Gallery - DIVs, ULs or DLs

HTML & CSS
1

Looking to make a simple image gallery with captions underneath to start with. This widths will be the same but the heights may vary slightly.

I’ve seen suggestions for using Divs with floats, ULs and DLs to accomplish this. Does anyone have any thoughts on the pros and cons of each. They probably all work but now I’m starting to get confused. I have a grasp on each one but don’t know if there’s an advantage to one over the other

Thanks

2

Well if you float first of all, all the boxes will be aligned vertically to the top thus it would loook kinda crummy.
This example is nice, however I think Paul forgot IE7 support there? IE7 doesn’t support display:table (which is what he usese to vertically align) but it looks like only IE6 support is there.

Either use a conditional comment to target IE7 down and place this inside it

.inner {top:50%;left:0;}
.inner p{top:-50%;	position:relative;}

Or add this code in the regular stylesheet

*+html .inner {top:50%;left:0;}
*+html .inner p{top:-50%;	position:relative;}
3

Well if you float …

Understood, but are you saying floating DIVs is not the way to go? And if so, is there an advantage in using ULs over DLs. My questions was to see if I could stimulate a comparison of the 3 methods I mentioned.

Thanks

4

The only difference between the three is semantics. All will do the required job. I’m not a semantics guru so I don’t want to lead you down a bad path, so someone else will probably explain the best element ot use, I’ll just point you in the direction of a method to do the job :).

Floating in general would not be the way to go (unless you want everything alinged top, and since everything is a different height as you said it wouldn’t look too great)

5

thanks

That make sense. I’ll look forward to, hopefully some more thoughts on this subject.

6

For a gallery with captions, where heights may vary, floats require that that the number of items per row be known (so you know where to clear the next row).

My own suggestion is a list with inline-block items. See The Inline-block Thumbnail Gallery.

cheers,

gary

7

That’s an old demo long before IE7 was even thought of :slight_smile: (I never got around to updating all these old demos).

Inline-block is the way to go as already mentioned. Gary has a good article linked to in his post. (Here’s a similar demo of mine that may be of some use also. )