floating an image so text wraps around it.

[deansaddigh]

as above.

 

Here is my css code:

 

img.floatLeft { 
    float: left; 
    margin: 4px; 
}

 

here is my html/php

 

echo '<p>';
				echo $productdescription = $row['ProductDescription'];
			echo '</p>';



			$imagename = $row["ImageName"];
			$imagepath = $row["ImagePath"];
			$file = $imagepath.$imagename;


			echo 'Hover over image to enlarge';
                echo '<td><img src="'.$file.'" class="floatLeft" data-zoomsrc="'.$file.'" width="200" height="200"/></td>';?>
        		 		

 

 

Basically i want the image to float to the left of the product description but its not working any ideas?

[noober]

Everything looks ok here, do you have a link to the page. Is it online?

[haku]

When asking for CSS help, please show us the outputted HTML rather than showing us the PHP. The PHP doesn't really matter.

[JustLikeIcarus]

Your image file needs to be before any of the text you want to have wrap around it. When an item is floated its positioned within the normal flow, then taken out and repositioned.  Anything coming before the floated item will have an effect especially when floating to the left.

 

Your CSS looks fine.  Just move your image to the begining of the text and all should be good.