I am thinking of adding an “Avatar Gallery” to my website for those who wish to not upload a personal photo.
From an HTML/CSS standpoint, how would I make it so that if my PHP grabbed 23 Avatars, that they would be displayed in a grid-like pattern? (e.g. 4 Rows of 5 Avatars, plus one Row of 3 Avatars)
I guess the key concept here, if that the number of Avatars would be dynamic, so that means my HTML/CSS needs to be more flexible!
Sincerely,
Debbie
Hi Debbie,
Are the avatars all the same height and width (or contained within an element of set height and width)?
If so you could simply float them left and let them wrap as required within the constrains of a parent container with a width that allows 5 in a row.
If the avatars are to be different widths and heights then you would probably need to use inline-block so that they wrap without snagging.
My God… He’s still alive!!! 
Since I will be making them, yes, they can be. (Probably squares…)
Hmmm… I’m very rusty on my CSS.
So would I float the <img> tag?
These would probably be going in the middle column of the “Fixed Left/Right, Flexible Middle Column” you helped me out with long ago.
Not sure if that changes your answer.
(BTW, I’m not hung up on 5-across, it was just an example.)
Sincerely,
Debbie
Hi,
I’d do it something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
ul.avatars {
margin:0 auto;
padding:0;
list-style:none;
width:50%;
border:1px solid #000;
overflow:hidden;
zoom:1.0;
}
.avatars li, .avatars a { float:left; }
.avatars li img {
display:inline;
vertical-align:middle;
}
.avatars li, .avatars a {
width:150px;/* whatever the max size is*/
height:150px;/* whatever the max size is*/
line-height:150px;/* match height */
text-align:center;
}
.avatars li {
margin:0 10px 10px;
border:1px solid red;
}
</style>
</head>
<body>
<ul class="avatars">
<li><a href="#"><img src="http://placehold.it/30x30" alt="avatar" width="30" height="30"></a></li>
<li><a href="#"><img src="http://placehold.it/20x20" alt="avatar" width="20" height="20"></a></li>
<li><a href="#"><img src="http://placehold.it/30x30" alt="avatar" width="30" height="30"></a></li>
<li><a href="#"><img src="http://placehold.it/20x20" alt="avatar" width="20" height="20"></a></li>
<li><a href="#"><img src="http://placehold.it/30x30" alt="avatar" width="30" height="30"></a></li>
<li><a href="#"><img src="http://placehold.it/20x20" alt="avatar" width="20" height="20"></a></li>
<li><a href="#"><img src="http://placehold.it/20x20" alt="avatar" width="20" height="20"></a></li>
<li><a href="#"><img src="http://placehold.it/20x20" alt="avatar" width="20" height="20"></a></li>
<li><a href="#"><img src="http://placehold.it/40x40" alt="avatar" width="40" height="40"></a></li>
<li><a href="#"><img src="http://placehold.it/50x50" alt="avatar" width="50" height="50"></a></li>
<li><a href="#"><img src="http://placehold.it/60x60" alt="avatar" width="60" height="60"></a></li>
<li><a href="#"><img src="http://placehold.it/70x70" alt="avatar" width="70" height="70"></a></li>
<li><a href="#"><img src="http://placehold.it/80x80" alt="avatar" width="80" height="80"></a></li>
<li><a href="#"><img src="http://placehold.it/20x20" alt="avatar" width="20" height="20"></a></li>
<li><a href="#"><img src="http://placehold.it/20x20" alt="avatar" width="20" height="20"></a></li>
<li><a href="#"><img src="http://placehold.it/20x20" alt="avatar" width="20" height="20"></a></li>
<li><a href="#"><img src="http://placehold.it/40x40" alt="avatar" width="40" height="40"></a></li>
<li><a href="#"><img src="http://placehold.it/50x50" alt="avatar" width="50" height="50"></a></li>
<li><a href="#"><img src="http://placehold.it/60x60" alt="avatar" width="60" height="60"></a></li>
<li><a href="#"><img src="http://placehold.it/70x70" alt="avatar" width="70" height="70"></a></li>
<li><a href="#"><img src="http://placehold.it/80x80" alt="avatar" width="80" height="80"></a></li>
</ul>
</body>
</html>
That allows for different size avatars to be vertically centred within a max height and width.
Paul,
You never cease to amaze me!!! :tup:
Some questions to better understand what you did…
1.) Why did you use an Unordered List and List Items?
Originally I was just going to Float the Images themselves…
2.) What is the purpose of this again…
ul.avatars{
overflow: hidden;
zoom: 1.0;
}
3.) Why do you have to Float both the li and a…
.avatars li,
.avatars a{
float: left;
}
4.) What does the “inline” do here, and what would be the alternative? (Sorry, but I haven’t played around with CSS in over a year… Been too busy with PHP!!) 
.avatars li img{
display: inline;
}
5.) What is the purpose of Line Height here… (When I think of Line Height, I think of paragraphs…)
.avatars li,
.avatars a{
width: 150px; /* whatever the max size is*/
height: 150px; /* whatever the max size is*/
line-height: 150px; /* match height */
text-align: center;
}
6.) While I appreciate the extra flexibility your design offers, don’t you think it would be better to make all of my Avatars the same size (e.g. 75 x 75 pixels)?
(Although your design would work great if this was instead for Thumbnails!!) :agree:
Thanks for all of the help once again!!
You always inspire me with all of the cool things you can do with CSS!!
Sincerely,
Debbie
Good
1.) Why did you use an Unordered List and List Items?
When you have more than one of anything it is likely to be a list of things and so a ul is most appropriate (not always though). The benefit of a list is that it gives you a nice parent to use (the ul) and then the list elements to hold the content. It stops the page being all divs (divitus) (and when formatted reads much easier from a coders point of view).
Menu items usually go in lists because they are a list of links and you have a list of avatars so use the most semantic element available.
Originally I was just going to Float the Images themselves…
I assumed that they were going to be links so you would need an anchor around them anyway and if you float the list and not the anchor then the anchor may not surround the image in some older browsers. So assuming you have an anchor around the image then it is historically bad for accessibility to have anchors next to each other separated only by white space (screen readers would read it as a sentence and not pause) hence the need for a parent which brings us right back to my list element.
2.) What is the purpose of this again…
ul.avatars{
overflow: hidden;
zoom: 1.0;
}
The overflow:hidden makes the UL contain the floats so that the parent extends around them otherwise the UL would collapse to zero height (zoom does the same thing for ie7 and under)
3.) Why do you have to Float both the li and a…
.avatars li,
.avatars a{
float: left;
}
Because they both need to be dimensioned and older versions of IE prefer lists and anchors to be floated rather than the anchor just display:block (otherwise they stretch the list to 100% of the available line length when in haslayout mode. It’s not much of a problem these days but old habits die hard).
4.) What does the “inline” do here, and what would be the alternative? (Sorry, but I haven’t played around with CSS in over a year… Been too busy with PHP!!)
.avatars li img{
display: inline;
}
It does nothing if the image is already inline (which is its default) but a lot of resets put images to block by default so that was just to make sure. The vertical-align:middle was to change the vertical alignment from the default which is baseline but vertical-align only applies to inline elements (and table-cells). If the image was block then the vertical-align would have no effect and the image would be stacked at the top of the box.
5.) What is the purpose of Line Height here… (When I think of Line Height, I think of paragraphs…)
.avatars li,
.avatars a{
width: 150px; /* whatever the max size is*/
height: 150px; /* whatever the max size is*/
line-height: 150px; /* match height */
text-align: center;
}
It sets the line-height to the same as the height of the parent and thus non-wrapping content will be vertically centred in that space without any special consideration. The vertical-align:middle that I mentioned above ensures this.
6.) While I appreciate the extra flexibility your design offers, don’t you think it would be better to make all of my Avatars the same size (e.g. 75 x 75 pixels)?
Yes if you are going to create images of the same size then you just need to float them all with no special considerations as there is no need for vertical alignment.
I would do it more simply like this:
.avatars li,
.avatars a,
.avatars img {float:left}
.avatars li {margin:0 10px 10px 0}
You wouldn’t need any dimensions as the image will use its intrinsic dimensions to control it all. I float all to avoid any whitespace around the images and inline elements.
(Although your design would work great if this was instead for Thumbnails!!) :agree:
That was the idea to provide a more versatile approach and cater for variances.
Remember though if one of your images is 1px taller than the others then they will snag when they wrap.
Thanks for all of the help once again!!
You’re welcome
Paul O’B,
Just like in the “ol days”, you’ve given me quite a bit to chew on!!! 
Thank you for all of awesome code and tips!!!
Before I can use your code, however, I still need to figure out the “page design” for the new functionality that I’m trying to add. (Not sure if that would be better asked in a new thread or here? Probably a new thread!)
Thanks a bunch!!
Sincerely,
Debbie