HTML Positioning Images and Text

Usually (as a beginner) your text combined with images will look like this.

Or it might look like this. Is this right? 

Or it might look like this.

Maybe you tried to improve things by centering and now it looks like this.

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. What do you think? Does this look better than what you have in your page?

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 “images” folder. Select, copy, and paste the following code into your HTML page:

<img src=”images/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.