CSS Float Property Tutorials

The CSS float property allows you to set an element to the left or to the right of the containing element. Any other elements that are within the containing element will flow around the element that is floated if the combined width of the elements fit within the containing element taking into account of the margins of the floated element. If more than one element is floated to the same side will site horizontally alongside each other.

The CSS float property is primarily used to create web page layouts and also to align elements within the web pages, for example, to create image galleries.

The Float Property and Its' Possible Values

The possible values of the float property are listed below.

Property Value
float left, right, none, the initial value is none

The example will show you the float property in action. The content below is a paragraph with an image followed by some text within the paragraph. There are no CSS rules applied to the HTML code below.

<p> <img src="image.jpg" width="100" height="100" alt="css float tutorial by LearnWebsiteDesign.com" /> This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. </p>

The HTML code above creates the image and text below. Notice the placement of the image in relation to the rest of the text.

css float tutorial by LearnWebsiteDesign.com This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com.

How To Float an Image to the Right

Now I will apply the float property with a value of right to the image selector (img) within the CSS code.

<!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" xml:lang="en" lang="en"> <head> <title>Document Title</title> <style type="text/css"> img { float:right; } </style> </head> <body> <p> <img src="image.jpg" width="100" height="100" alt="css float tutorial by LearnWebsiteDesign.com" /> This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. </p> </body> </html>

The code above will create the content below which floats the image to the right of the text within the paragraph.

css float tutorial by LearnWebsiteDesign.com This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com.

How To Float an Image to the Left

To float an image to the left, apply the float property with a value of left.

The example below is the same one as the one above, except that a value of left is applied to the float property instead of a value of right.

<!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" xml:lang="en" lang="en"> <head> <title>Document Title</title> <style type="text/css"> img { float:right; } </style> </head> <body> <p> <img src="image.jpg" width="100" height="100" alt="css float tutorial by LearnWebsiteDesign.com" /> This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. </p> </body> </html>

The code above will create the content below which floats the image to the left of the text within the paragraph.

css float tutorial by LearnWebsiteDesign.com This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.com. This is an example by LearnWebsitedesign.om.

How To Float Images Next to Each Other

The float property allows you to float elements side by side by applying the same value of left or right to the elements. The elements fit within the containing element if the combined width of the elements fit within the containing element, taking into account any margins.

In the example below, the images have the the float property with a value of left applied to them.

<!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" xml:lang="en" lang="en"> <head> <title>Document Title</title> <style type="text/css"> img.image_float_left { float:left; } </style> </head> <body> <p> <img class="image_float_left" src="image.jpg" width="100" height="100" alt="css float tutorial by LearnWebsiteDesign.com" /> <img class="image_float_left" src="image.jpg" width="100" height="100" alt="css float tutorial by LearnWebsiteDesign.com" /> <img class="image_float_left" src="image.jpg" width="100" height="100" alt="css float tutorial by LearnWebsiteDesign.com" /> <img class="image_float_left" src="image.jpg" width="100" height="100" alt="css float tutorial by LearnWebsiteDesign.com" /> </p> </body> </html>

The code above produces the images below.

css float tutorial by LearnWebsiteDesign.com css float tutorial by LearnWebsiteDesign.com css float tutorial by LearnWebsiteDesign.com css float tutorial by LearnWebsiteDesign.com