Thread: div css
View Single Post
  #9 (permalink)  
Old 09-12-08, 07:17 AM
job0107's Avatar
job0107 job0107 is offline
Community Liaison
 
Join Date: Dec 2006
Location: Tacoma, Washington USA
Posts: 3,454
Thanks: 0
Thanked 140 Times in 137 Posts
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>
__________________
Jerry Broughton
Reply With Quote