CSS code help for aligning text next to images

I have been searching the web for how to do what I want to do and have been playing around but cannot get it quite right. I have several images that I want to basically stagger on a page with text next to each image. I have uploaded a FW image to show how I want the layout to work.

The site is http://foxdencreations.com

I know that floats are involved but I want the text to align with the top of each image and for there to be space between each section. I don’t want to use tables to set this up. Currently I have text then below image then text then image, etc, etc, etc. How do I code the CSS for this to work as in the example?


You will need to float one picture to the left and the other to the right on the Necklace page.

p     { 
.lftF { 
.rtF  { 

The <img> needs the class .lftF or .rtF and you need to style the <br> to clear as shown below (in-line style for clarity only).

<img class="lftF" src="http://foxdencreations.com/images/butterfly_thmb.jpg"  ...... etc.

<p><br style="clear:both" />
      <a href="images/silver_white_cross.jpg" rel="lightbox">
      <img class="rtF" src="http://foxdencreations.com/images/silver_white_cross_thmb.jpg" .... etc

Thank you so much Allan. This works perfectly! Just what I was wanting to do. Now to change all my jewelry pages and add new items. Those of you out there that have wives/girlfriends/mothers/etc I make custom beaded jewelry! And of course all the ladies that use this site because I KNOW I am not the only one.