Hot Scripts Forums - View Single Post

job0107 · #9 (**permalink**) 09-12-08, 07:17 AM

If you float your image then the text will wrap around it.

In this example I am floating the image left.

HTML Code:

<html>
<head>
<style>
body
{
 background:#000;
 }
.container
{
 border:4px solid #fff;
 width:508px;
 }
.myDiv
{
 border:4px solid #ccc;
 background:#fff;
 width:500px;
 height:500px;
 padding:10px;
 text-align:justify;
 overflow:auto;
 }
.myImg
{
 float:left;
 margin-right:15px;
 margin-bottom:5px;
 }
</style>
</head>
<body>
<div class="container">
 <div class="myDiv">
  <img class="myImg" sec="" width="200px" height="200px">
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
 </div>
</div>
</body>
</html>

And in this example I am floating the image right.

HTML Code:

<html>
<head>
<style>
body
{
 background:#000;
 }
.container
{
 border:4px solid #fff;
 width:508px;
 }
.myDiv
{
 border:4px solid #ccc;
 background:#fff;
 width:500px;
 height:500px;
 padding:10px;
 text-align:justify;
 overflow:auto;
 }
.myImg
{
 float:right;
 margin-left:15px;
 margin-bottom:5px;
 }
</style>
</head>
<body>
<div class="container">
 <div class="myDiv">
  <img class="myImg" sec="" width="200px" height="200px">
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
  This is some text that I want to wrap around the image.
 </div>
</div>
</body>
</html>