Using the "Float" Command in CSS

Often times within a paragraph of text, a picture needs to be added.  In order to align the picture to the right or the left of the text, you could use the HTML command, <DIV ALIGN="right"> tag or "left" to get the image in the right place.  This will properly place the image on the right or left, but it will leave no margin between the image and the text.  The text to the right or left would be smashed up right next to it.  The CSS "float" command provides a comfortable alternative.

To align an image to the left using "float", this code would need to be added within the IMG tag like this:

style="float:left; margin-right:10px"

The "float" command tells the image to place to the left of the text, and the margin provides a buffer so that the text does not touch the image on the right hand side.  Margins can also be added to the other sides as needed. Of course, to place the image on the other side of the text with the same buffer, the code would look like this:

style="float:right; margin-left:10px"

The right and left commands our swapped in this example to place the image on the right with a buffer on the left.  Within this code, you can also create image borders, image padding, and colored backgrounds using proper CSS commands within the STYLE attribute.