I'm trying to create a page where image 1 floats to the left of text1, and below that image 2 floats to the left of text2.

If I make each image float:left, the second block of text comes straight after the first block of text, ie directly underneath it. I want it to sit to the right of image 2, which is further down the page.

(If I float text 2 to the right of image 2 it floats right over to the right hand side of the screen, instead of up against image 2.)

This is what I'm trying to get:

xxxxxxxxxx
xxxxxxxxxx text 1
xIMAGE 1x
xxxxxxxxxx
xxxxxxxxxx

xxxxxxxxxx
xxxxxxxxxx text 2
xIMAGE 2x
xxxxxxxxxx
xxxxxxxxxx

If anyone can be bothered showing me what to do here I'd be very grateful. I haven't found a tute on floating that has this scenario. PS, I want to avoid tables here.

something like this ?

html:

<div id="image1">
<img src="fred.gif" width="100px" height="100px" />
<p>
test gergerg ge5 ghgggh54
</p>
</div>
<div id="image2">
<img src="fred.gif" width="100px" height="100px" />
<p>
test gergerg ge5 ghgggh54
</p>
</div>


css:

#image1 img{
float:left;
}
#image2 img{
clear:left;
float:left;
}

This only works in IE.

#image1 img{
float:left;
}
#image1{
float:left;
margin-bottom:10px;
}
#image2{
clear:left;
}
#image2 img{
clear:left;
float:left;
}

Thanks jameslow. You're a champion.