Wrapping Text Around an Image

Using css to align text around an image

Sticky Note CSS Help
Quick copy and paste tutorial to allow text to wrap around an image in an HTML webpage using css float. See example below.

See Also…

Text Wrap Example:
Image You might want to have text wrap around an image on your webpage along with a paragraph. You can have the text align to the left or to the right of the image. The text can not wrap around an image in the center. You can also include spacing using CSS margins and a border using CSS border code. Below on this page is code you can copy and paste onto your html webpages to have a wrapping text image. Margins can be set for top, right, bottom and left and can be as much spacing as you would like. Spacing around the image may be uneven in some cases. You may need to experiment with the size of the image and amount of css margin spacing to use depending on your text size.

Image float code
The following code uses css float:left. Add the image code below just before the text that you want to have wrap. Place an image named "yourimage.jpg" in your "picts" folder. Select, copy, and paste the following code into your HTML page:

<img src="picts/yourimage.jpg" height="99" width="99" alt="Image" style="float: left; margin: 4px 10px 0px 0px; border: 1px solid #000000;">

Add your wrapping text paragraph after the above image code.

Edit to float left or right, and adjust the margins and border styles to your requirements.

Note: Margin code is in order; top, right, bottom, left.

Clearing the float
If you have a small amount of text, or your image is large, and you do not want it to wrap with the next paragraph of text on the page, you can clear the float by adding the following code after your text paragraph.

<p style="clear: both;">

Related Topics:
New Window Target Links
Adding Page Links