CSS and the Float Property

The CSS Float property allows web designers to move and align images, text, and backgrounds as well as 
create multi-column layouts, using just a few simple CSS rules.  Think of the way a newspaper or magazine article is usually designed, with images often floated to the side of text, which is forced around the image.  Float-based layouts use the float property to achieve this same effect, positioning elements side-by-side, and allowing the text to wrap around images, columns, or even other text!  


The float property can only be used with one of three values: left, right, and none.  When it comes to floating an object, it's important to make sure all content you wish to float is wrapped in a <div> tag with an ID or class attribute in your HTML file.  (For more information, please see: http://htmlhelp.com/reference/html40/attrs.html)  


For example, let's say we want to create a webpage with an image, and a "main content" container.  First, we would want to create our <div> tags.  We'll call our image div "img" and our main content div "main".  Our tags would then look like this:


    <div id="img">Image goes here.</div>
    <div id="main">Main content goes here.</div>


Without any CSS properties, our page would look very generic, with each element stacking on top of the next vertically.  But we really wanted our sidebar to be on the left, with the main content in the center of the page.  Using the float property, this can be done!  


After assigning our <div> tags ID's, we need to go into our CSS file.  When it comes to using floats, it's best to remember that the order you added HTML to your file is important!  In other words, the HTML for the element you plan to float must appear before the HTML for the element that wraps around it.  In our case, without adding more CSS (and more hair-pulling  annoyances!) we can only float the "img" content, and the "main" content  will be wrapping around it.  The image content comes before the main content in the HTML, so it can float either left, or right.


Let's say we want to move our image to the right, with our "main" content wrapping around it on the left.  To do this, our CSS would look like this:
  
  #img {
         float: right;
}


And, if we wanted to move the image to the left instead, it would be... Yep, you guessed it:
  
   #img{
          float: left;
}


Seems pretty easy, right?  Well, to an extent, yes.  However, it's important to take our columns and images widths into account when floating.  Unless you are floating an element with a predefined width, you should always make sure to give your element a width.  By doing this, we're able to create a defined size for our floated element, allowing the browser to make room for more content (in our case, our "main" content) to wrap in place.   If you forget to set a width for an element, the element is likely to fill its containing block horizontally, leaving no room for other content to wrap around it.  It's important to take into account the widths you wish to set for all content on the page.  


Margins are also very helpful when it comes to using the float property, and just like when defining widths, it's important to take the widths of the rest of the content into account .  Often, one column can be shorter than another, which can cause other elements to wrap around elements incorrectly.  Adding a margin that's greater than the width of the upcoming column or text can help to move the element into a more fixed position.   Remember earlier when I said "the HTML for the element you plan to float must appear before the HTML for the element that wraps around it"?  Using margins, this rule can be ignored.  


Let's say we wanted to have our "main" content to appear before the "img" div.  Using a negative margin allows us to shift the "main" content through our" img" div and to the left of the page.  Once again, it's a good idea to take into account the widths that are already set.


Float: clear; comes into affect when you want to move an element, but do not want other elements to "wrap"  around other elements.  Float: clear; basically tells the element to ignore all other float properties. You can choose to make an element drop below a left or a right-floated object. 


For example, let's say we still wanted our image on the left of the page, but we did not want our "main" content to wrap around the float, and instead appear below the image.   In this case, our CSS would look like this:
       #img{
           float: left;
}


      #main{
           clear: left;
}
           


For more information about the float-property visit: http://www.cssnewbie.com/css-float-property/.
Take a float tutorial at: http://css.maxdesign.com.au/floatutorial/index.htm.