Wrapping of text around image in HTML / XSLT

Sometimes we have requirement of wrapping text around images (Left/ Right). We can achieve this functionality by using "align" attribute of the <img> tag. The catch here is the Image and text should be in same "div" tag.

However we do have requirement of having different CSS design specification for Image and Text wrapped around the image. In this case, we will put the image tag in one outer DIV tag and then put the wrapped text in different DIV tag inside the outer DIV.

Let's take an example where some text is wrapped around an Image which is left aligned. The typical XSL code would be like:

<div >
<!-- Image tag with align attribute-->
<img class="Article_Image" src="@Article_Iamge" align="left"/>
<!-- Title Div-->
<div class="Article_Title">
<b>
<a id="Article_Link_Title" href="{$SafeLinkUrl}" target="{$LinkTarget}">
<xsl:value-of select="$DisplayTitle"/>
</a>
</b>
</div>
<!-- Description Div -->
<div class="Article_Description">
<xsl:value-of selectsubstring(@Abstract_Text,1,250)" disable-output-escaping ="yes"/>
<a id="Article_Link_Description" href="{$SafeLinkUrl}" target="{$LinkTarget}">
...
</a>
</div>
</div> <!-- Outer Div tag ends here -->

This code will align the image in the left with Title & description wrapped around it.