In Action

CSS Float for layout

The CSS float tag is one of the harder tags to understand and apply in your code. The float tag is typically used to wrap text around an image. The following is an simple example that will show you with the least amount of pain and suffering how to use the float property.

Example



You can also float the image to the right. This is done merely by changing the class reference in the image tag from "floatleft" to "floatright."



Toycode

CSS Code for Float

 

		.boxtxt {
			width: 400px;
			border: 1px solid #000;
			padding-left: 20px;			
			padding-right: 20px;
			padding-top: 20px;
			padding-bottom: 20px;
		}
		
		.floatleft {
			float: left;		
		}
		
		.floatright {
			float: right;		
		}



If you look at the html code you see that everything is contained within a div tag. You will also note that the image is referencing a css class named "floatleft." If you look at the css code you will see that the "floatleft" property has a single property, "float" whose value is "left"

By applying our image to the "floatleft" class which contains the the property causes whatever preceeds it to float (or wrap) around it. Further, by defining a class in CSS (instead of inlining the float property within the img tag) we create something more generic that we can apply to other tags as well.

If you are still looking for more details and information on using the float tag I recommend the following site.

Float tutorial

Toycode

HTML Code

You can right mouse click in the iframe above (the example that is displayed) and get the source for the entire page. Or, you can cut-n-paste the code below.

HTML Code for float

 

<div class="boxtxt">
<h2>CSS Example of wrapping text around an image using the float property</h2>
<img class="floatleft" src="images/pencilcup.png" 
                          alt="float tag image" 
                          width="100" 
                          height="100">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
culpa qui officia deserunt mollit anim id est laborum
</div>