There are many situations on Web pages where you have an image that you'd like to appear inside the text with the text flowing around it. With the CSS float property it's easy to float your image to the right of the text and have the text flow around it on the left side.
Difficulty: Easy
Time Required: 5 minutes
Here's How:
- Write a paragraph of text and add an image at the beginning of the paragraph (before the text, but after the <p> tag):
<p> <img src="blwebcam-sample.jpg" alt="Suni" /> Duis aute irure dolor sed do eiusmod tempor incididunt in reprehenderit in voluptate. Cupidatat non proident, ut labore et dolore magna aliqua. Sunt in culpa quis nostrud exercitation excepteur sint occaecat. Mollit anim id est laborum. </p>
Example - Add a style attribute to the image, and apply the float property:
<img src="blwebcam-sample.jpg" alt="Suni" style="float:right;" />
Example - Your text will be rammed right up against the image, so add some margins to the image to make it easier to read:
<img src="blwebcam-sample.jpg" alt="Suni" style="float:right;margin:0 5px 0 0;" />
Example
The margin shorthand property applies margins in the order top, right, bottom, left (TRBL).
