CSS Float
Floating is often used to push an image to left or right, while having the text of a paragraph wrap around it.
Float Image
Wrapping text around an image is easy when using the CSS Float attribute. You have a choice to either float the picture to the left or to the right and the rest is done for you. Below is an example of an image that is floated to different sides of a paragraph.
CSS Code:
img.floatLeft { float: left; margin: 4px; }
img.floatRight { float: right; margin: 4px; }
html Code:
<body>
<img src="sunset.gif" class="floatLeft">
<p>The images are contained with...</p>
<img src="sunset.gif" class="floatRight">
<p>This second paragraph has an...</p>
</body>
Floating Multiple Images
If you were to simply float three images to the right, they would appear alongside one another. If you wish to have the next image start below the end of the previous image, then use the CSS Clear attribute.
CSS Code:
img.floatRightClear {float: right; clear: right; margin: 4px; }
html Code:
<body>
<img src="sunset.gif" class="floatRightClear">
<img src="sunset.gif" class="floatRightClear">
<p>The images are appearing...</p>
<p>If we had specified...</p>
<p>The number of paragraphs...</p>
</body>
