Today I got a requirement of wrapping text all around a div actually not all around, around three sides i.e., top left and bottom, like the following image.
Simple CSS solved my problem, this same thing can also be used for wrapping images with text all around it.
Try this code and run :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
div.topSpacerDiv {
width: 0px;
height: 60px;
float: left;
}
div.DIV {
float: right;
clear: both;
border:1px solid red;
height:100px; width:200px;
}
</style>
</head>
<body>
<div class="container">
<div class="topSpacerDiv"></div>
<div class="DIV">
DIV with content
</div>
is par likhi sabhi batein bilkul kalpnik hai, iska kisi bhi jivit ya mrit vyakti se koi sampark nhi hai, iska prayog keval testing
purpose ke lie kiya gya hai.is par likhi sabhi batein bilkul kalpnik hai, iska kisi bhi jivit ya mrit vyakti se koi sampark nhi hai,
iska prayog keval testing purpose ke lie kiya gya hai.is par likhi sabhi batein bilkul kalpnik hai, iska kisi bhi jivit ya mrit vyakti
se koi sampark nhi hai, iska prayog keval testing purpose ke lie kiya gya hai.is par likhi sabhi batein bilkul kalpnik hai, iska kisi
bhi jivit ya mrit vyakti se koi sampark nhi hai, iska prayog keval testing purpose ke lie kiya gya hai.is par likhi sabhi batein bilkul
kalpnik hai, iska kisi bhi jivit ya mrit vyakti se koi sampark nhi hai, iska prayog keval testing purpose ke lie kiya gya hai.is par
likhi sabhi batein bilkul kalpnik hai, iska kisi bhi jivit ya mrit vyakti se koi sampark nhi hai, iska prayog keval testing purpose ke
lie kiya gya hai.is par likhi sabhi batein bilkul kalpnik hai, iska kisi bhi jivit ya mrit vyakti se koi sampark nhi hai, iska prayog
keval testing purpose ke lie kiya gya hai.is par likhi sabhi batein bilkul kalpnik hai, iska kisi bhi jivit ya mrit vyakti se koi
sampark nhi hai, iska prayog keval testing purpose ke lie kiya gya hai.is par likhi sabhi batein bilkul kalpnik hai, iska kisi bhi
jivit ya mrit vyakti se koi sampark nhi hai, iska prayog keval testing purpose ke lie kiya gya hai.is par likhi sabhi batein bilkul
kalpnik hai, iska kisi bhi jivit ya mrit vyakti se koi sampark nhi hai, iska prayog keval testing purpose ke lie kiya gya hai.is par
likhi sabhi batein bilkul kalpnik hai, iska kisi bhi jivit ya mrit vyakti se koi sampark nhi hai, iska prayog keval testing purpose ke
lie kiya gya hai.is par likhi sabhi batein bilkul kalpnik hai, iska kisi bhi jivit ya mrit vyakti se koi sampark nhi hai, iska prayog
keval testing purpose ke lie kiya gya hai.is par likhi sabhi batein bilkul kalpnik hai, iska kisi bhi jivit ya mrit vyakti se koi
sampark nhi hai, iska prayog keval testing purpose ke lie kiya gya hai.is par likhi sabhi batein bilkul kalpnik hai, iska kisi bhi
jivit ya mrit vyakti se koi sampark nhi hai, iska prayog keval testing purpose ke lie kiya gya hai.iska kisi bhi jivit ya mrit vyakti
se koi sampark nhi hai, iska prayog keval testing purpose ke lie kiya gya hai.is par likhi sabhi batein bilkul kalpnik hai, iska kisi
bhi jivit ya mrit vyakti se koi sampark nhi hai, iska prayog keval testing purpose ke lie kiya gya hai.is par likhi sabhi batein bilkul
kalpnik hai, iska kisi bhi jivit ya mrit vyakti se koi sampark nhi hai, iska prayog keval testing purpose ke lie kiya gya hai.is par
likhi sabhi batein bilkul kalpnik hai, iska kisi bhi jivit ya mrit vyakti se koi sampark nhi hai, iska prayog keval testing purpose ke
lie kiya gya hai.
</div>
</body>
</html>
In the above code the class topSpacerDiv is most important, the small div i.e., DIv position depends on the height of the topSpacerDiv.
If you want the small div DIV in left position you have to just change the float:right; to float:left; in the CSS of DIv class.
Why dont you copy paste this code and run and try to play with the CSS, you will be clear.
