In this tutorial we're going to talk about the float property. For this tutorial you will need to be familiar with the Basics of CSS and you should be familiar with the Advanced CSS tutorials until this point.

Float Property

The float property allows for an element to be pushed to the left or the right so other elements can wrap around it. Floated elements can only be moves horizontally (left or right). All floated elements will move as far right or as far left as it possibly can; this is dependent upon the nature of the container that the element is in.

Values

  1. left - floats element to the left
  2. right - floats element to the right
  3. none - specifies no floating

Consider the following code:

body {
     margin:auto;
     width:1000px;
     background-color:#4c4c4c;
     font:verdana, "Times New Roman", san-serif;
     font-size:11px;
     color:#fff;
}

#container {
     width:300px;
     background:transparent url('image/img.jpg') repeat-x;
     min-height:125px;
     float:right;
}

We have made the body element have a width of 1000px (the rest of the styles are irrelevant) and then we defined an ID selector that has a width of 300px and a min-height of 125px (it has to be at least 125px tall) and this element will be pushed to the edge of the right side of the container.

Since floated elements allow other elements to wrap around the floated element. All elements before the float property will not be affected, however, all element thereafter the float property will be affected. Consider the following code:

body { /*...*/ }
#container {
     width:300px;
     background:transparent url('image/img.jpg') repeat-x;
     min-height:125px;
     float:right;
}

.float-right {float:right;}
<html>
<body>
<div id="container">
     <p>This element will be on the right edge of the page that is
1000px across.</p>
</div>
<p>This is some text</p>
<img src="image/img.gif" height="100" width="100" alt="img" 
class="float-right" />
<p>This is some text</p>
</body>
</html>

This example would allow for the text to wrap around "img.gif" no matter what size the image is (in the case of the example it is 100px by 100px).

Floating Elements

As we mentioned before, floating an element will push the element to the right or left side of the container if possible. Consider the following code:

.fancy {
     width:500px;
     float:left;
}
<h2>Title here</h2>
<div class="fancy">
<img src="img.gif" height="64" width="64" alt="img" />
<p>Description here</p>
</div>

This will put the image inside of an area of 500 px wide and infinitely tall (depending the amount of content in that class selector).

Clear Property

How do we "turn off" floated elements? The clear property specifies which sides of a floated element you want to keep clear of other floating elements.

Values

  1. left - clears the left side of the element
  2. right - clears the right side of the element
  3. both - clears both the left and right side of the element
  4. none - does not clear either side of the element

Consider the following code:

<html>
<head>
<style type="text/css">
.clearfix {clear:both;}
.fancy {
     width:500px;
     float:left;
     margin:5px;
}
</style>
</head>
<body>
<div class="fancy">
<h2>Fancy Pictures</h2>
<img src="img.gif" height="64" width="64" alt="img" />
<img src="img2.gif" height="64" width="64" alt="img" />
<img src="img3.gif" height="64" width="64" alt="img" />
<img src="img4.gif" height="64" width="64" alt="img" />
<img src="img5.gif" height="64" width="64" alt="img" />
<p class="clearfix">Some explanatory text here</p>
<img src="img6.gif" height="64" width="64" alt="img" />
<img src="img7.gif" height="64" width="64" alt="img" />
</div>
</body>
</html>

In the code above, you would have all of the styles we defined in the fancy class and then a break of text where no floated element is allowed (neither left or right). This will clear a space for the explanatory text where no floated element will exist. This can be useful for adding more titles or text to the "fancy" class we created.

It is recommended that you click on the download button below to see this property and its many values in action!

float.zip
float.zip
Size: 41.47 KB
Be Sociable, Share!