1. Computing

Discuss in my forum

How To Float an Image to the Left of Text

By

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 left of the text and have the text flow around it on the right side.
Difficulty: Easy
Time Required: 5 minutes

Here's How:

  1. 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
  2. Add a style attribute to the image, and apply the float property:
    <img src="blwebcam-sample.jpg" alt="Suni" style="float:left;" />
    Example
  3. 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:left;margin:0 5px 0 0;" />
    Example
    The margin shorthand property applies margins in the order top, right, bottom, left (TRBL).
  1. About.com
  2. Computing
  3. Web Design / HTML
  4. Cascading Style Sheets
  5. Beginning CSS
  6. How to Float an Image to the Left of Text - Float an Image Left

©2014 About.com. All rights reserved.