simple image gallery - DIVs vs UL vs DL

[blueman2]

Looking to make a simple image gallery with captions underneath to start with. 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.

[monie]

I assume you want the images to be horizontally adjacent to each other no matter which method you use?

As you said, THEY PROBABLY ALL WORK. The important thing as everyone offers you advice is to remember that. Otherwise you'll get more, not less, confused. :)

DIV FLOAT PROS:
-Div styles are pretty reliable cross-browser.
-You say "images with captions underneath to start with". If you're planning on adding more complicated stuff, having each gallery item inside of a div may be helpful.
-For those who don't know a ton about how CSS behaves, it may be easier to set <div>s' styles than <li>s' styles. For example, when you set a <li>'s width to 100px, does that include the bullet point and the space between it, or not? Do you know the answer?

UL pros:
You can easily set a style for the whole gallery: that is, if you wanted all the captions to be font-size:11px, you could put that in the UL's style instead of each DIV's style.

DL: I'm not familiar enough with DL to say.

Keep in mind, you could even have <div>s inside floated <li>s inside a <ul>. (That's what I would do. That way, you can have the advantages of both divs and ULs, and an extra advantage: margins and padding will be easier to manage*.)

*If you didn't already know, css width sets the width of the content, and margins/padding are added on after that. E.g. given
#gallery {height:500px; border:1px black solid;}
#gallery li {height:100%; padding:5px; border:1px black solid;}
the <li>s would be set to 500px tall, and THEN padding would be added within their borders, so they would be 510px tall total.

However, given
#gallery {height:500px; border:1px black solid;}
#gallery li {float:left; height:100%; border:1px black solid;}
#gallery li div {margin:5px;}
and
<ul id='gallery'><li><div>content1</div></li>
<li><div>content2</div></li>
</ul>
the <li>s would remain 500px tall and there would still be a 5px space between "content(1,2)" and the li's border. This may or may not be useful; depends on your individual gallery.

So: I'd recommend divs inside floated li's; but then I don't know just what you envision your gallery looking like.
Otherwise, between floated divs and UL's: if you put all the divs within a container div, the container div could be made to act like a <ul>; meanwhile, <li>s are containers just like any other and can be made to act like <div>s. So what it really comes down to is your personal preference.

[blueman2]

Thanks for your detailed explanation.