using css float tag for different size images

[camphor]

hi and happy new year

I am using the css float tag to align all my images but some of the images are not the same width, I am using a liquid layout but am having trouble aligning them properly on the page, here are the css and html

div.float {float: left; width: 125px; padding: 10px; margin: 25px;}

<div class="float">
<a href="../images/times%20mag%20aug%202003%20big.png"><img src="../images/times mag aug 2003 small.png" alt="The Times mag Aug 2003" border="0"></img></a></div>

Some of the images are 458px wide, 321px wide and 179px wide

For the wider images the css is:

div.floatLarge {float: left; width: 125px; padding: 25px; margin: 95px;}

but then the vertical spacing in between the larger width images are quite big and I am not sure how to fix it.

Can anyone help?

thanks

[drhowarddrfine]

Well, for the larger images you are making the margin 95px wide and for the smaller images the margin is smaller.

[camphor]

if I make the padding smaller than 25px or margin smaller than 80 px then the larger images will overlap, if you go to www.christinebec.com/About CB/selected_editorials.htm, I want the larger images spaced out evenly, please help as I am not sure how to solve this problem

[drhowarddrfine]

You can set the padding for the different sides like this:
div.floatLarge {float: left; width: 125px; padding: 0 25px 0 25px; margin: 95px;}
which reads as top, right, bottom, left for the padding.

Is that what you had in mind?

[camphor]

You can set the padding for the different sides like this:
div.floatLarge {float: left; width: 125px; padding: 0 25px 0 25px; margin: 95px;}
which reads as top, right, bottom, left for the padding.

Is that what you had in mind?

sort of but thanks very much for your help

[AricC]

sort of but thanks very much for your help

Have you fixed your issue?