align left right
lorem ipsum is used as filler text in these example. Just read the red and blue text.
align=left
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vivamus aliquam nulla ut metus. Praesent vulputate ipsum et ligula.
Donec rhoncus lacinia nulla. Curabitur vehicula erat a erat.
Cras scelerisque eros ornare est.
All this text is typed before the image.
This is the last line typed before the image.
This is the first line typed after the image.
All this text is typed after the image.
Notice that this text wraps around the image.
The image is aligned on the left.
Nullam est odio, hendrerit eget, mollis vitae, posuere at, est. Nunc a mauris.
Ut quis mi. Sed in purus sed tortor venenatis porttitor.
Sed pulvinar nibh ut dui. Vestibulum nec odio. Morbi tincidunt molestie justo.
Vestibulum sit amet mi. Integer gravida. Vestibulum in nibh nec lectus semper tempus.
Nullam faucibus. Nunc in sapien at magna interdum imperdiet. Ut mollis sagittis lorem.
Integer non dolor. Mauris consequat ullamcorper metus. Integer pellentesque ipsum congue dui.
Donec euismod libero.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Phasellus aliquet. Quisque et urna id dolor mattis adipiscing.
Phasellus dapibus condimentum eros. Mauris sollicitudin dapibus lacus.
Mauris id nulla quis quam laoreet faucibus.
The img tag used in the above example is:
<img src="images/square.gif" alt="square" height="67" width="66" align="left" />
style=float: right
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vivamus aliquam nulla ut metus. Praesent vulputate ipsum et ligula.
Donec rhoncus lacinia nulla. Curabitur vehicula erat a erat.
Cras scelerisque eros ornare est.
All this text is typed before the image.
This is the last line typed before the image.
This is the first line typed after the image.
All this text is typed after the image.
Notice that this text wraps around the image.
The image is aligned on the right.
Nullam est odio, hendrerit eget, mollis vitae, posuere at, est. Nunc a mauris.
Ut quis mi. Sed in purus sed tortor venenatis porttitor.
Sed pulvinar nibh ut dui. Vestibulum nec odio. Morbi tincidunt molestie justo.
Vestibulum sit amet mi. Integer gravida. Vestibulum in nibh nec lectus semper tempus.
Nullam faucibus. Nunc in sapien at magna interdum imperdiet. Ut mollis sagittis lorem.
Integer non dolor. Mauris consequat ullamcorper metus. Integer pellentesque ipsum congue dui.
Donec euismod libero.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Phasellus aliquet. Quisque et urna id dolor mattis adipiscing.
Phasellus dapibus condimentum eros. Mauris sollicitudin dapibus lacus.
Mauris id nulla quis quam laoreet faucibus.
The img tag used in the above example is:
<img src="images/square.gif" alt="square" height="67" width="66" style="float: right;" />
margin
When we studied text, we looked at the box model.
Here we will put a margin around the image box.
We could use one value for the margin, which would provide the same margin for all four sides.
The margin property can take 4 values for the top, right, bottom, and left sides:
margin: 5px 10px 5px 0px;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vivamus aliquam nulla ut metus. Praesent vulputate ipsum et ligula.
Donec rhoncus lacinia nulla. Curabitur vehicula erat a erat.
Cras scelerisque eros ornare est.
All this text is typed before the image.
This is the last line typed before the image.
This is the first line typed after the image.
All this text is typed after the image.
Notice that this text wraps around the image.
The image is aligned on the left.
Margins are provided.
Nullam est odio, hendrerit eget, mollis vitae, posuere at, est. Nunc a mauris.
Ut quis mi. Sed in purus sed tortor venenatis porttitor.
Sed pulvinar nibh ut dui. Vestibulum nec odio. Morbi tincidunt molestie justo.
Vestibulum sit amet mi. Integer gravida. Vestibulum in nibh nec lectus semper tempus.
Nullam faucibus. Nunc in sapien at magna interdum imperdiet. Ut mollis sagittis lorem.
Integer non dolor. Mauris consequat ullamcorper metus. Integer pellentesque ipsum congue dui.
Donec euismod libero.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Phasellus aliquet. Quisque et urna id dolor mattis adipiscing.
Phasellus dapibus condimentum eros. Mauris sollicitudin dapibus lacus.
Mauris id nulla quis quam laoreet faucibus.
break
You may wish to break at the end of the line before the image
with an ordinary <br />.
You may wish to break, forcing all following lines to be below the image.
This can be done with the style clear: both;.
You could put the style clear property in any element.
I like to put it in a br element.
This line is typed before the image.
This line is typed after the image.
This line is typed after the clear break.
The following is used in the above example:
This line is typed before the image.
<br />
<img src="images/square.gif" alt="square" height="67" width="66"
style="float: left; margin: 5px 10px 5px 0px;" />
This line is typed after the image.
<br style="clear: both;" />
This line is typed after the clear break.