creates a floating image

float: ***;

Browser
Internet Explorer Firefox Opera

The float property creates a floating box.

The floating image can be created by applying this property to the IMG element.

#example {
float: left;
}

Property Value Explanation
float left the image floats to the left
(the text wraps to the right of the image)
right the image floats to the right
(the text wraps to the left of the image)
none the image doesn't float (default)

Please see the "clears float" when you specified the left or right.

Example

<html>
<head>
<title>TAG index</title>

<style type="text/css">

#example { width: 100%; }

#example1 { float: left; }
#example2 { float: right; }

</style>

</head>
<body>

<div id="example">

<img src="image/photo.jpg" alt="Example" width="200" height="133" id="example1">
<p>
The text wraps to the right of the image.<br>
This is example text.<br>
This is example text.
</p>

<p style="clear: left;">--- Clears the left float ---</p>

<img src="image/photo.jpg" alt="Example" width="200" height="133" id="example2">
<p>
The text wraps to the left of the image.<br>
This is example text.<br>
This is example text.
</p>

<p style="clear: right;">--- Clears the right float ---</p>

</div>

</body>
</html>
Output
Example

The text wraps to the right of the image.
This is example text.
This is example text.

--- Clears the left float ---

Example

The text wraps to the left of the image.
This is example text.
This is example text.

--- Clears the right float ---