The float property (CSS Reference)
Introduction
The float property can be used to specify whether the
current element should float with the previous elements. This can be very
useful if you are working with newspaper articles. I am sure that you have seen
images between some texts. This can be reached with the float property.
Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>float Demonstration</title>
</head>
<body>
<h1 style="width:290px; float:left;">This is
my headline</h1>
<p style="font-size:120%">And this is some
text which explains
how the property works. The below example demonstrates the
same
example with an image instead of a headline. Some more text
here
here here here here here here here here here here here here
here
here here here here here here here here here here here
</p>
<hr/>
<img
src="http://www.topxml.com/images/topxml_site.gif"
style="float:right;">
<p style="font-size:120%">This example shows
an image next to the text.
This is the style which many newspaper articles use. As you
can see the
usage is very easy. Just simple apply the float property
with one of the
following values: left, right, none. This line should be
floated under the
image now.</p>
</body>
</html>
Output
Values
|
Name:
|
Description:
|
|
left
|
This value can be used to assign the element to the left
side.
|
|
none
|
This is used if you do not want any element to float.
|
|
right
|
This value is used if you want the element to float on the
right side.
|
|
Email TopXML