codescracker


css

CSS Float



« Previous Tutorial Next Tutorial »


Sometimes you need to use the next wrap feature in a document to properly arrange the position of images with respect to their description. For instance, you need to set an image as floated to right side and rest of the content in the left side.

CSS allows you to implement the text wrap feature in a Web page by using the float property.

Float property makes an HTML element as a floated element and defines the side where other elements are displayed.

The syntax to use the float property is given as follows :

float: [value];

The float property supports values described in the table given here:

Value Description
left Floats an element to the left with respect to the content.
right Floats an element to the right with respect to the content.
none Does not float an element.
inherit Floats an element using the same float settings as specified for its parent element.

The following code fragment floats an image in the right side :

<p>
  <img src="image.gif" alt="image" style="float: right;" />
  The text is in left direction.
</p>

You can disable the effect of the float property by using the clear property. This means that you can turn off the effect of the float property by using the clear property.

The syntax to use the clear property is given as follows:

clear: [value];

The clear property supports values descried in the following table:

Value Description
left Disables the effect of a left floated element.
right Disables the effect of a right floated element.
both Disables the effect of both left and right floated.
none Does not disable the effect of a floated element.
inherit Uses the same clear settings as specified for its parent element.

An example of using the clear property is given as follows:

img { clear: both; }

How Elements Float with CSS ?

Elements are floated horizontally, this means that an element can only be floated left or right, not up or down.

A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element.

The elements after the floating element will flow around it. The elements before the floating element will not be affected.

If an image is floated to the right, a following text flows around it, to the left.

CSS Float Example

Here is an example on CSS float:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Float Example</title>
	<style>
		p#rght { float: right; }
	</style>
</head>
<body>

<p>The below Paragraph will float right.</p>
<p id="rght">This floats right.</p>

</body>
</html>

Here is the sample output produced by the above CSS float example code:

css float right

Float Elements Next to Each Other with CSS

If you place several floating elements after each other, they will float next to each other if there is room.

Let's look at the following example, here we have made an image gallery using the float property with CSS:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Float Example</title>
	<style>
		.image_float { float:left; width:150px; height:150px; margin:5px; }
	</style>
</head>
<body>

<img class="image_float" src="image_float_1.jpg" width="147" height="150">
<img class="image_float" src="image_float_2.jpg" width="147" height="150">
<img class="image_float" src="image_float_3.jpg" width="147" height="150">
<img class="image_float" src="image_float_4.jpg" width="147" height="150">
<img class="image_float" src="image_float_5.jpg" width="147" height="150">
<img class="image_float" src="image_float_6.jpg" width="147" height="150">
<img class="image_float" src="image_float_7.jpg" width="147" height="150">
<img class="image_float" src="image_float_8.jpg" width="147" height="150">
<img class="image_float" src="image_float_9.jpg" width="147" height="150">
<img class="image_float" src="image_float_10.jpg" width="147" height="150">

</body>
</html>

Here is the live demo output produced by the above CSS float example code. Try to resize your browser's window to see what happens when the images do not have enough room:

css float css image float css image float example css float example float in css float example in css image float float image float in css image float example in css

Turn Off Float Using clear Property

Elements after the floating element will flow around it. To avoid this, use the clear property.

The clear property specifies which sides of an element other floating elements are not allowed.

Add a text line into the image gallery, using the clear property.

You can skip floating one after other using clear property to continue after images placement.

Let's look at the following example, here we have placed some images, floats one after other, then used the clear property to go to the next line, then placed some texts, then again placed some images, also float one after other, then again used the clear property to go to next line, then write some text:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Float Example</title>
	<style>
		.image_float { float: left; width: 150px; height: 150px; margin: 5px; }
		.skipfloating { clear:both; }
	</style>
</head>
<body>

<p>Images on 17-09-2009 :-</p>
<img class="image_float" src="image_float_1.jpg" width="147" height="150">
<img class="image_float" src="image_float_2.jpg" width="147" height="150">
<img class="image_float" src="image_float_3.jpg" width="147" height="150">
<img class="image_float" src="image_float_4.jpg" width="147" height="150">
<img class="image_float" src="image_float_5.jpg" width="147" height="150">
<img class="image_float" src="image_float_6.jpg" width="147" height="150">
<img class="image_float" src="image_float_7.jpg" width="147" height="150">

<p class="skipfloating">Images on 24-09-2009 :-</p>
<img class="image_float" src="image_float_8.jpg" width="147" height="150">
<img class="image_float" src="image_float_9.jpg" width="147" height="150">
<img class="image_float" src="image_float_10.jpg" width="147" height="150">

<p class="skipfloating">Description of above Images.</p>
<p>All the above images are awesome and clicked from 17-09-2009 to 24-09-2009.</p>

</body>
</html>

Here is the live demo output of the above CSS float example code. If you have big screen, then try to resize (resize to make screen's width small) to watch the effect.

Images on 17-09-2009 :-

css image floating11 css image floating12 css image floating13 css image floating14 css image floating15 css image floating16 css image floating17

Images on 24-09-2009 :-

css image floating18 css image floating19 css image floating20

Description of above Images.

All the above images are awesome and clicked from 17-09-2009 to 24-09-2009.


« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test