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.
jamesqhAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

JezcentralCommented:
You cannot give a width or height to an inline element, so take display: inline out of the the div. Divs are block elements. To make them gop side-by-side, use float: left:

<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>

Set a width in the #row1 to control how wide you want it.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
JezcentralCommented:
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.
0
JezcentralCommented:
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>
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

JezcentralCommented:
You'll also want to give the divs that surround the images a margin: 6px 0 0 6px; border: 1px solid #ffffff;
0
jamesqhAuthor Commented:
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
0
JezcentralCommented:
Hmm. Vertical-align support is a bit shakey. Try using <img valign="middle"/>
0
jamesqhAuthor Commented:
Thanks Jezcentral,

Close enough.

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

Cheers,
James
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.