asked on

Displaying cleanly aligned rectangular thumbnails within square DIVs?

I am creating a photo gallery. On the thumbnails page I am outputting rectangular thumbnails - the same size but some are portrait orientation and some are landscape orientation.

So far each thumbnails is being output like this:
<div style="display: inline;"><a href="link_to_big_image.jpg"><img src="rectangular_thumbnail.jpg" width="250" height="170" /></a></div>

So the thumbnails are up against each other and wrapping around onto multiple lines.

What I want to do is wrap each image in a square div (250x250 pixels), horizontally and vertically align the image within the div, give the div a 1px solid white border, and space each div by about 6 pixels.

I have done this before using a table but in this case I want the number of thumbnails per line to be automatically determined based on how much space there is to fill.

ASKER CERTIFIED SOLUTION

Jezcentral

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Jezcentral

Add this to your css styles to deal with class="clearfix":

.clearfix:after {content: "."; display: block; height: 0; line-height:0; font-size:0; clear: both; visibility: hidden;}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

You should always put this class on an element that conatins a floated element.

Jezcentral

here is the full vaild html for this section:
<div id="row1" class="clearfix">
<div style="float: left;height: 250px; width: 250px; text-align: center; vertical-align:middle;"><a href="link_to_big_image.jpg"><img src="rectangular_thumbnail.jpg" width="250" height="170" /></a></div>
<div style="float: left;height: 250px; width: 250px; text-align: center; vertical-align:middle;"><a href="link_to_big_image.jpg"><img src="rectangular_thumbnail.jpg" width="250" height="170" /></a></div>
</div>

Jezcentral

You'll also want to give the divs that surround the images a margin: 6px 0 0 6px; border: 1px solid #ffffff;

jamesqh

ASKER

Thanks Jezcentral,

It's looking good! The vertical align doesn't appear to be working, however (tested in MSIE and firefox)

http://artofimagery.webnerd.com.au/jasmine-dance-by-ben-heys (be aware that the content is photography of the artistic nude genre)

(scroll down a bit to find some landscape oriented thumbnails)

Thanks,
James

Jezcentral

Hmm. Vertical-align support is a bit shakey. Try using <img valign="middle"/>

jamesqh

ASKER

Thanks Jezcentral,

Close enough.

I put each thumbnail in a one-cell table and used valign and align

Cheers,
James