Aligning Images

I feel in this case, especially with images that can be lined up as thumbnails, putting them as lists will work best because its a list of thumbnail images for one, and two selecting them makes it ten times easier because div tags are the most common used tags in html. With divs, you have to create classes and be specific, with an unordered list and list items, you might have to specify one class at most and then select deeply from there. Take this for example:

This is a group of images in an unordered list:

<ul>
    <li><img src="photo1.jpg" alt="" /></li>
    <li><img src="photo2.jpg" alt="" /></li>
    <li><img src="photo.3.jpg" alt="" /><li>
</ul>

by using the less common ul tag which is usually only used for links as stated above, you can specify one class name to the ul and then apply specific changes to the children without having to add additional class names for further targeting.

ul with added class:

<ul class="photo_album">
    <li><img src="photo1.jpg" alt="" /></li>
    <li><img src="photo2.jpg" alt="" /></li>
    <li><img src="photo3.jpg" alt="" /><li>
</ul>

Now I can style the parent element with positioning as well as style the individual childs as such:

/*styles for parent box that holds all the childs*/
ul.photo_album{
    width: auto;
    height:auto;
    position:relative;
   padding: 10px;
}

/* styles for children within parent element */
ul.photo_album li{
    width: 200px; /* or whatever you want */
    height: auto; /* or whatever you want */
    float: left;
}

img{
width: 100%;
}

with one class, I was able to select any element with that parent because that tag isn't widely used across the page. Imagine if the ul tag was a div tag with a class with a bunch div's within divs. you would have had to establish at least two class names to do the same thing. It is a personal preference but I fill by using the unordered list concept, the syntax is a bit more correct because it is a list of items for one, and it's a bit easier to control and identify.