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.
</p>
<p>
<img class="right" src="sample.gif" width="100" height="100" />
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.
</p>
<p>
<img class="right" src="sample.gif" width="100" height="100" />
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:
<html>
<head>
<style type="text/css">
div
{
float:left;
border:1px dashed red;
margin: 10px 10px 10px 15px;
text-align:center;
padding:20px
}
img.right
{
float:right;
border: 1px dotted blue
}
</style>
</head>
<body>
<div>
<img src="sample.gif" width="100" height="100" /><br />Bruce Lees pwns Joo!
</div>
<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.
</p>
<p>
<img class="right" src="sample.gif" width="100" height="100" />
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>
Next: Floating Text for a Fairy Tale Look >>
More Style Sheets Articles
More By James Payne
