This article will self-destruct in twenty seconds. Okay, not really; it will probably take you longer than that to read it, and you may even want to use it as a reference. In this mind-blowing episode, we discuss the many classification properties in CSS, all of which give you the ability to determine how and where your elements are displayed.
CSS: Top Secret Classification - Floating Elements (Page 2 of 4 )
You can make elements float to left or right of text using float. This determines where an image or some text will appear in another element. Here, in the example below, we will float an image to the left and then the right of some paragraphs:
<html>
<head>
<style type="text/css">
img
{
float:left
}
img.right
{
float:right
}
</style>
</head>
<body>
<p>
<img src="sample.gif" width="100" height="100" />
Bruce Lee sat staring at the universe, the Milky Way portion particularly. The planet he named Earth when he created it was at the furthest end and he did not like it there, so he round-kicked it into a position closer to the sun. And thus, life on Earth was possible.
On another occasion Bruce Lee got into an argument with the Greek God Zeus. Things quickly escalated, as Bruce will not be disrespected, and he pimp slapped the thunderbolt out of Zeus. The Greek god was so upset he cried for 40 days and 40 nights, forcing God to tell Noah to build the ark. On the forty-first day, Zeus apologized.
</p>
</body>
</html>
Note that you can always set the float value to none, but then, why bother doing it at all?
Here is a similar example, where we give an image some border properties and use margins on one of the images so the text does not hug it:
<html>
<head>
<style type="text/css">
img
{
float:left;
border:1px dashed red;
margin: 0px 10px 10px 15px
}
img.right
{
float:right;
border: 1px dotted blue
}
</style>
</head>
<body>
<p>
<img src="sample.gif" width="100" height="100" />
Bruce Lee sat staring at the universe, the Milky Way portion particularly. The planet he named Earth when he created it was at the furthest end and he did not like it there, so he round-kicked it into a position closer to the sun. And thus, life on Earth was possible.
On another occasion Bruce Lee got into an argument with the Greek God Zeus. Things quickly escalated, as Bruce will not be disrespected, and he pimp slapped the thunderbolt out of Zeus. The Greek god was so upset he cried for 40 days and 40 nights, forcing God to tell Noah to build the ark. On the forty-first day, Zeus apologized.
</p>
</body>
</html>
And in this example, we will add a caption to one of our floating images:
<p>Bruce Lee sat staring at the universe, the Milky Way portion particularly. The planet he named Earth when he created it was at the furthest end and he did not like it there, so he round-kicked it into a position closer to the sun. And thus, life on Earth was possible.
On another occasion Bruce Lee got into an argument with the Greek God Zeus. Things quickly escalated, as Bruce will not be disrespected, and he pimp slapped the thunderbolt out of Zeus. The Greek god was so upset he cried for 40 days and 40 nights, forcing God to tell Noah to build the ark. On the forty-first day, Zeus apologized.
Style Sheets 
HTML5 Boilerplate Introduction
