View Full Version : random placed/shaped thumbnails:best appoach?

11-07-2009, 01:55 PM
Hi there, as per usual I seem to be trying to create something non standard for an artists site with not enough experience.
I want a thumbnail page where the images are all different sizes and not aligned in any direction. AP Div's seem the only option but they do seem to be cross browser problematic. Lists always align horizontally? so no good.
I tried just creating div's: the 1st with left float, 2nd no float (with left padding equal to to the size of first div). Then when I tried to apply the same css rules to the 3rd div (as the 2nd) it didnt place it next but on a new row??

any pointers to best direction to take?

(I cant help many folk yet but I can give you a good Ernest Hemmingway quote, I'll be the fool!!!!

"An intelligent man is sometimes forced to be drunk to spend time with his fools"


11-07-2009, 04:39 PM
Try placing the thumbs inside a div and then have the images float left.

div.thumbs img {float:left;}

<div class="thumbs">
<img src="???" alt="" width="??px" height="??px" />
<img src="???" alt="" width="??px" height="??px" />
<img src="???" alt="" width="??px" height="??px" />
<img src="???" alt="" width="??px" height="??px" />

11-07-2009, 04:43 PM
you also might need to add a clearing element (an object with the clear:left or clear:both CSS property applied) after the last image if you'll have additional content below the div.

11-07-2009, 09:32 PM
ok, done that, I now have a row of images top aligned. How do I now add different padding around each and finely ajust the individual heights of each one so they are all totally different, can I now add divs round each image within that main div to do this?
I want a block of thumbs 4 rows x 3 colums, would I use 3 div's on top of each other with a row in each?

Still a little confused as you can see. thanks for your help

11-08-2009, 08:17 AM
You speak about a different padding around each, but the spacing around an object is called margin. Padding is the spacing inside the object.

You could give each image a different class to achieve the different margin around each.

<img src="???" alt="" width="??px" height="??px" class="img1"/>
<img src="???" alt="" width="??px" height="??px" class="img2"/>

.img1 {margin: 0 10px 5px 5px}
.img2 {margin: 0 7px 10px 5px}
and so on!

11-08-2009, 09:35 AM
ahhh!!!!! I didnt realise you could add a class to an image without a div round it, that should sort things out. Sorry I did mean margin.

thanks very much!

11-08-2009, 03:58 PM
You can add a class to any HTML element. Using DIV's all the time is called 'Divitis' ;)

11-08-2009, 05:32 PM
that sounds like the badger!

Best title for a post that I have seen in a long time :)

11-09-2009, 07:12 PM
cheers guys!

if I had to choose (not that you've actually asked me to but in case you're wondering) I'd rather be a badger than a divitis....... every time.