Combining three images

[JimHo]

I am trying to create what appears to be a single image out of three separate images.

I used to achieve this by creating a small table as follows:

Table
TR
TD
image 1
TD
image 2
TR
TD span =2
image 3

Here image 1 would be placed in the upper left, image 2 would be placed directly to the right of image 1, and image 3 would appear below both.

I have been trying to accomplish the same in CSS as follows [simplified]:

Style
#cbimg{ width: 190px; height: 200px; margin: 0; padding: 0; border: 0;}
#img1 { display: block; position: relative; float: left; width: 150px; height: 160px;
#img2 { position: relative; display: block; width: 40px; height: 160px; clear: right;}
#img3 {display: block; width: 190px; height: 40px;}

HTML
<div id="cbimg">
<img id="img1" src=..>
<img id="img2" src=..>
<img id="img3" src=..>
</div>

When I do this, I end up with the three images stacked on top of each other.

Is there something I am missing here?

Thanks Jim

[JimHo]

I think I figured this one out

It required to position all images as relative, and to use the Tan hack once for image 1 (3px), and twice for image 2 (6px)

[simonuk]

I would keep it even more simple:

#img1 {float:left;}
#img2 {float:left;}
#img3 {clear:both;}

From memory I'm pretty sure you need to specify the div sizes for Firefox etc or you may have a gap but that is as simple as I can think of.

Simon.