Wrap Text Around An Image Tutorial - AllWebCo Templates

Wrapping Text Around an Image

Using css to align text around an image

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…

• Adding images to webpages

Text Wrap Example #1 (wrap under 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) 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. <img src="picts/yourimage.jpg" height="100" width="100" alt="Image" style="float: left; margin: 15px 12px 3px 0px; border: 1px solid #000000;"> <div style="overflow: hidden; min-width: 200px;"> Place your text here. Use this for a large amount of text. The next line closes the div. </div> <p style="clear: both;"></p> Related Topics: New Window Target Links Adding Page Links Editing Template Images Adding an Image to a Page Wrapping Text Around an Image Adding Page Links Build a Table Tutorial Add a Sidebar Tutorial Css Locate DIV Tutorial Selector Menu Tutorial Favicon in the Address Bar Upgrade for Mobile Update your older website for mobile compliance by adding a smartphone version sub-site. Allwebco Design Provider of developer and designer grade downloadable HTML web templates.