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)
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.
0 Comments: