Image layout css

[franklin82]

I fairly new to css and have come across a problem that I've been trying to solve for the last couple of days using various techniques I've found on the web.

Basically I want to center 2 images on a page each with a caption and then have any other text below the images.

This is the CSS I'm using:

div.img {
float:left;
margin:5px;
height:150px;
width:169px;
text-align:center;
}

div.img img {
display:inline;
margin:3px;
border:0;
}

div.img a:hover img {
}

div.desc {
text-align:center;
font-weight:normal;
width:169px;
margin:21x;
}

and this is the html I've used:

<div class="img">
<img src="img/001.jpg" alt="" width="169" height="119" />
<div class="desc">Caption</div>
</div>

<div class="img">
<img src="img/002.jpg" alt="" width="169" height="119" />
<div class="desc">Caption</div>
</div>

This is aligning the images to the left of the page and then wrapping the next block of text to the right of the second image. (see attachment)

I'd very much appreciate any help/suggestions you may have!

[littleoracle]

i'd suggest starting by wrapping both of the image divs in another div and then styling that outer div with clear:both.