Aligning Images with Text

Return to CSS

Using float: left;
<p class="floatleft"> <img src="cookbook.gif" alt="cookbook" width="88" height="59" /></p>

cookbook

The image is to the left and any text is displayed along the right edge of the image, starting at the top. Once all the lines next to the image are used the text is displayed below the image.

 


Using float: right inside the paragraph containing the image:
<p class="floatright"><img src="cookbook.gif" alt="cookbook" width="88" height="59" /></p>

cookbook

The image is to the right and any text is displayed along the left edge of the image. Once all the lines next to the image are used the text is displayed below the image.


<p >Using float: right inside the image coding:
<p><img alt="cookbook" src="images/COOKBOOK.GIF" width="88" height="59" class="floatright" /> </p>

cookbook

The image is to the right and any text is displayed along the left edge of the image. Once all the lines next to the image are used the text is displayed below the image.

 

Return to the Top