grouping several images with different sizes using float or position

[warp_fr]

Hi,

I want to group several images with different sizes like this :
1st col : 1 img 240x180px
2nd col : 2 img (one above the other) 120x90px
3rd col : 1 img 135x180px

but can't figure out which following method is best practise.
Maybe any other solution? I'm just beggining my conversion to full CSS layout design ;-)

Thx

1st method - using position
---------------------------

div.col01 {position:absolute; margin-left:240px;}
div.col02 {position:absolute; margin-left: 360px;}

<div>
<div class="col01">
<img src="images/thumb_02.gif" width="120" height="90"><br>
<img src="images/thumb_03.gif" width="120" height="90">
</div>
<div class="col02">
<img src="images/thumb_04.gif" width="135" height="180">
</div>
<div>
<img src="images/thumb_01.gif" width="240" height="180">
</div>
</div>

2nd method - using float
------------------------

div.box01 {width:495px;}
div.col01 {width:360px; float:left;}
.box01,.col01 img {float:left;}

<div class="box01">
<div class="col01">
<img src="images/thumb_01.gif" width="240" height="180">
<img src="images/thumb_02.gif" width="120" height="90">
<img src="images/thumb_03.gif" width="120" height="90">
</div>
<img src="images/thumb_04.gif" width="135" height="180">
</div>
</div>

[4css]

Hi, not to sure about this, but I think you need to float all the images.
div.box01
{
float: left;
width:495px;
}
I think you also might want to add a small margin to help push the divs away from each other.

[warp_fr]

If I use only 1 div for all the pics with float:left and width:495px, it won't work as the 2 smallest pics (120x90) in colonn 2 won't be one under the other one but sided and the last pic (135x180) will jump under the first smallest pic.
The deal here is I want to find the easiest way (acting as a class) to assemble some pics that have different size (my exemple use 4 but I need to assemble much more), always ending as a rectangular or squared shape for the container.

[warp_fr]

div.box01
{
float: left;
width:495px;
}

oops, and I think this won't work as it applies to the div itself not to the pics inside it.
What I was thinking in my last message was about making a div with width:495px and assume all pics in it will float:left using div.box01 img {float:left;}

[4css]

Max designs has a tutorial for floating images. If you do a search on this you should find the link, it should help you out.

btw, my mistake on the
div.box01 {width:495px;}
I misread that part of the post, I see now that its your container div.

I'm working on something similar right now, but the differnce is that I am using thumbs and they are all the same size. I'm not sure if this makes a difference or not?

[createErrorMsg]

Floating is an obvious answer but will be complicated by your use of different sized images. You will need to maintain tight pixel-control over the layout in order to avoid the pitfalls of floating differently sized images.

The problems will arise when you run out of room on the first 'line' of the container box and the next float is moved down until it has room to clear previous floats. With like sized images, this isn't a problem. It moves down, gets the room it needs, then lifts out and floats in the float direction until it hits the edge of the container. but differently sized images can cause problems, because floats also stop floating when they hit the edge of another float. If the, say, third picture in your top row sticks down a few pixels more than the others, the first float in that second row will stop there, leaving an unsightly gap.

Check out positioniseverything.net's article on float behavior to see a visual of what I mean.

A way to solve this is to pre-determine how many pics will be in each row, then create floated container divs for each row that hold X number of floated images. As long as the container is floated, too, it will expand to enclose the largest image, preventing the weird stack up.

[warp_fr]

That what I was figuring out, I should stick to floating method and cloacking pics in several div, as absolute could be tricky to manage with a lots of pics anyway.
thx^^

[warp_fr]

Well, I tested it. It does work perfect but I do feel like going back to table design! Having a floating container and 5 floating div inside, with about 1 to 3 floating images in each inside div... won't all those floating element cause any problem (I think I read something about ie doing not so good with lot's of floating), because the floating structure is suppose to act as a template layout that will be reproduced a couple times on a single page.