Wrapping text around an image

Help!

[Annex]

How do I wrap text around an image (that's in a table or not). I've been trying to figure it out for a week. I'm going nuts!

[penders]

Hi Annex, welcome to WebmasterWorld... Text is often wrapped around an image, by 'floating' (CSS: float) that image either to the left or right of your page. If you float the image to the left (the image will appear on the left of the page), then text (or anything) will wrap around the right (and vice versa). The CSS float property is very similar to the (largely deprecated) 'align' attribute in HTML. Floating an image in this way, effectively takes the image 'out of the flow of the page'.

If we have the HTML:

<div id="container"> 
<img class="floatleft" src="testimage.gif"> 
<p>Some text which wraps to the right of the floated image.....</p> 
<p>Some more text.....</p> 
<p>And more and more text...</p> 
<img class="floatright" src="testimage.gif"> 
<p>This text should start to wrap around the left of the 2nd image, since the 2nd image is floated right.... but if you don't have enough content above then it will also wrap around the right of the previous image!</p> 
<p>You need quite a bit of text to see the full effect....</p> 
<p>Blah, blah, blah....</p> 
<!-- You may need to clear the floated images --> 
<div class="clear"></div> 
</div>

And the CSS:

.floatright { 
float:right; 
margin:0 0 10px 10px; /* Give it a left margin */ 
} 
.floatleft { 
float:left; 
margin:0 10px 10px 0; /* Give it a right margin */ 
} 
.clear { 
clear:both; 
width:100%; 
font-size:1px; 
}  

As soon as you 'float' an element, everything will wrap around it. If you don't want this to happen then you need to 'clear' the element that follows the floated element, using

clear:left;

(if the element is floated left), or

clear:right;

or

clear:both;

.

Also, because elements which are 'floated' are taken out of the flow of the page (as mentioned above), any containing elements (like our

<div id="container">

above) will 'collapse' to only contain the non-floated elements. This could result in any big floated images, flowing outside of the container. To get around this, we can add a

<div class="clear"></div>

element at the end of our container, to force the container to contain our floated elements (phew!).

Actually, an alternative to the clearing DIV, maybe to simply add the following to the containing DIV instead (avoids extra markup in the HTML)....

#container { 
overflow:hidden; 
width:100%; /* Force hasLayout in IE */ 
}

You can use the same technique inside a table cell if you wish - but tables are not required (or recommended!).

Bit of an intro - hope that helps and hasn't confused you! Any queries just post back...