CSS code help for aligning text next to images

HTML & CSS
1

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?

Thanks.

2

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


p     { 
   margin-top:0px; 
   margin-bottom:10px; 
  } 
.lftF { 
   float:left; 
   margin-right:20px; 
   margin-top:3px; 
  }
.rtF  { 
   float:right; 
   margin-left:20px; 
   margin-top:3px;  
  }

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
3

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.