CSS FLOAT property

One of the neatest properties you can invoke on a DIV tag is to FLOAT it. What does it mean to FLOAT? It means to move a DIV element to either the top left or the top right of the element which incloses it.

First think about the image tag <IMG>. If you called the "align" attribute like so <img src="coolGraphic.jpg" align="left">, you'd see the image essentially "float" to the left of the text that was in the same paragraph and the text would wrap around the image. This kind of behavior is essentially what the FLOAT property accomplishes with a DIV tag.

A DIV tag naturally takes up the full width of its container, much like the paragraph tag does. This makes it impossible to float a DIV tag unless you specify a width, and that width should be less than the width of the outer container. In the example below, we float three thumbnail images to the left. Each thumbnail is 120 pixels wide, but their outer container is 300 pixels wide. Take a look:

What happened? The first thumbnail moved up to the top left corner. There is still room for one more thumbnail to fit at the top because 300 pixels minus 120 pixels is 180 pixels. Therefore, one more thumbnails is stuck up at the top. The third and final thumbnail does not have enough room to fit in the top row, so it shows up on a row of its own. Below we show the CSS CLASS we call "detailImage" as it appears in the CSS properties file for FLOATing thumbnails:

.detailImage
{
    margin: 0 5px 10px 5px;
    width: 120px;
    height: 120px;
    display: block;
    float: left;
}

* html .detailImage 
{ /* This is the Tan hack for IE to correct margins */
    width: 124px;
    height: 124px;
    margin: 0 2px 5px 2px;
}

Now here is a look at the actual HTML used to display the three thumbnails in this example:

<div style="width: 300px; margin: 0 auto;">
    <div class="detailImage">
        <img src="/showProductImage/57/img.jpg">
    </div>

    <div class="detailImage">
        <img src="/showProductImage/11/img.jpg">
    </div>

    <div class="detailImage">
        <img src="/showProductImage/79/img.jpg">
    </div>
</div>

Interesting isn't it? You can certainly get very creative with the FLOAT property. Besides arranging thumbnail images, as we've done here, you can make 3 column layouts, etc. A very simple way to achieve a 3 column layout is to "float: left" a column and then "float: right" another column. Whatever is left would comprise the middle column.

The CLEAR property

You will want to, at times, not wrap text and other elements around the floated elements. You want to start all content on a new line after the floated content. To do this, you need the CLEAR property. You can "clear: left" and "clear: right" but most of the time you will simply want to clear floated items no matter if they appear on the left or the right and for this you'll want "clear: both." You can define a class for this or you might just use a BR tag like so <br style="clear: both;">.