I don't see where you added the clear:left??
This should work:
Code:
div.FrameSmall {clear:left; width:100%}
div.Float-L {float:left; margin:5px}
<div class="FrameSmall">
<div class="Float-L"><img alt="" src="../Images/Methane15-1.jpg" /></div>
<p class="First6">......</p>
</div>
<div class="FrameSmall">
<div class="Float-L"><img alt="" src="../Images/Ethane15-2.jpg" /></div>
<p class="First6">......</p>
</div>
A couple things:
Wrap the image in its own div.
You don't need the file name in the alt tag. It is supposed to be descriptive text that shows up if the image is missing, or is read aloud by Text-to-Speach software. If you don't have descriptive text, then leave it blank.
Change the file names of your images so they don't start with a number; and I would use a dash or underscore instead of a period between the numbers.
Put the style for your text in the "First6" definition in the CSS...that's what it's for.
And IMO, I would shrink the size of the images for methane and ethane a bit...they overpower the text a tad...as well as make them a .png like was mentioned before. It will save a ton of space if you have a lot of them.
Cheers!