Dissorted div with float

Hi all,

I'm struggling to get a dynamic view of some images on my home page. I'm using the <div style="float: left;"> to fill the column with images. Two images on each column. This works quite alright apart from the first apperance of the image. This image "puts" down the second images to row 2. On the second row the third image appears as it should.

Not the best explaination, but I hope it is a bit more clear when you see the code:

<table width="380px" border="1">
<tr>
<td>
<DIV STYLE="width:380; overflow-x:hidden">
<table border="1" cellspacing="0" cellpadding="0">
<div style="float: left;">
<table width="180px">
<tr>
<td style="text-decoration:none" class="CrossRefAreaLeftMargin" align="center" width="66">
<a style="text-decoration:none" class="CrossRefAreaText" href="nolink"><img border="1" width="66" height="50"></a>
</td>
<td style="padding-left:8px" width="104">
<a style="text-decoration:none;" class="CrossRefAreaText" href="#">Test 1, Test 1, Test 1, Test...</a>
</td>
</tr>
</table>
</div>
<div style="float: left;">
<table width="180px">
<tr>
<td style="text-decoration:none" class="CrossRefAreaLeftMargin" align="center" width="66">
<a style="text-decoration:none" class="CrossRefAreaText" href="nolink"><img border="1" width="66" height="50"></a>
</td>
<td style="padding-left:8px" width="104">
<a style="text-decoration:none;" class="CrossRefAreaText" href="#">Test 2, Test 2, Test 2, Test...</a>
</td>
</tr>
</table>
</div>
<div style="float: left;">
<table width="180px">
<tr>
<td style="text-decoration:none" class="CrossRefAreaLeftMargin" align="center" width="66">
<a style="text-decoration:none" class="CrossRefAreaText" href="nolink"><img border="1" width="66" height="50"></a>
</td>
<td style="padding-left:8px" width="104">
<a style="text-decoration:none;" class="CrossRefAreaText" href="#">Test 3, Test 3, Test 3, Test...</a>
</td>
</tr>
</table>
</div>
<div style="float: left;">
<table width="180px">
<tr>
<td style="text-decoration:none" class="CrossRefAreaLeftMargin" align="center" width="66">
<a style="text-decoration:none" class="CrossRefAreaText" href="nolink"><img border="1" width="66" height="50"></a>
</td>
<td style="padding-left:8px" width="104">
<a style="text-decoration:none;" class="CrossRefAreaText" href="#">Test 4, Test 4, Test 4, Test...</a>
</td>
</tr>
</table>
</div>
</table>
</DIV>
</td>
</tr>
</table>


I think there should be something with the second table tag (if a eleminate that one, it works ok), but I can't change that (accordind to a template I use).

I would really appreciate all comments on this, it drives med mad :=

All the best,
Martin

Do you have a live link that we can take a look at? Its kinda hard without seeing the images, and in the future, can you put your code inside the vbcode tags (http://www.codingforums.com/misc.php?do=bbcode)