Hi Doze,
I’ve been playing around with this. I had additional problems because I use floats for the layout (fixed by removing the float attribute from .thumbscontainer, and adding ’width: 100%’ to ul.thumbs, in case anyone else has similar problems with weird IE bahaviour).
Anyway, I first removed the &pics_per_row parameter. I instead used height and width in the &max_thumb_size parameter, setting a very large relative value for the width. This way, the thumbs will always resize to the height value, and not the width. All the thumbs will be of identical height. I then set the ul.thumbs li margins to ’0 10px 0 5px’ and set a height for p of 2.8em. This allows enough space for up to two rows of text in the title, and I set the overflow to auto, just in case a visitor resizes their text. Everything looks fine and dandy; the thumbs look far neater than they would if they were varying in height; the thumbs fill the space of a liquid layout; and images always reflow to the far left.
CSS changes I made:
ul.thumbs li {
list-style: none;
float: left;
display: block;
list-style-image: none !important;
margin: 0 10px 0 5px !important;
}
ul.thumbs {
list-style: none;
margin: 0;
padding: 0;
clear: both;
width: 100%;
}
ul.thumbs li p {
overflow: auto;
margin: -0.4em 0 1em 0.6em;
padding: 0;
font-weight: normal;
font-size: 100%;
height: 2.8em;
}
.thumbscontainer {
margin-bottom:20px;
}