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 #1 (wrap under image)
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.


Code for example #1
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="100" width="100" alt="Image" style="float: left; margin: 3px 12px 3px 0px; border: 1px solid #000000;">

Add your wrapping text paragraph after the 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 into 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;"></p>



Text Wrap Example #2 (clear under image)
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.


Code for example #2
Select, copy and paste this code if you want the text to not wrap under the image and keep flowing down the page. This example includes all elements including the ending float clear. The min-width will allow the text to wrap below the image on small smartphone screens.





Related Topics:
New Window Target Links
Adding Page Links