1. Technology

Understanding CSS Float

Using the CSS float Property to Design Web Page Layouts

By

tmm
longplay/Flikr/CC BY 2.0

The CSS float property is a very important property for layout. It allows you to position your web page designs exactly as you want them to display—but in order to use it you have to understand how it works.

In a style sheet, the CSS float property looks like this:

.right { float: right; }

This tells the browser that everything with the class of “right” should be floated to the right.

You would assign it like this:

<img src="picture.jpg" class="right" />

What Can You Float with the CSS float Property?

You can’t float every element on a web page. You can only float block-level elements. These are the elements that take up a block of space on the page, like images (IMG), paragraphs (P), divisions (DIV), and lists (UL).

Other elements that affect text, but don’t create a box on the page are called inline elements and can’t be floated. These are elements like span (SPAN), line breaks (BR), strong emphasis (STRONG), or italics (I).

Where Do They Float?

You can float elements to the right or the left. Any element that follows the floated element will flow around the floated element on the other side.

For example, if I float an image to the left, any text or other elements following it will flow around it to the right. Here is an example of an element floated right. And if I float an image to the right, any text or other elements following it will flow around it to the left. Here is an example of an element floated left. An image that is placed in a block of text without any float style applied to it will display however the browser is set to display images. This is usually with the first line of following text displayed at the bottom of the image. Here is an example of an image with no float styles on it.

How Far Will They Float?

An element that has been floated will move as far to the left or right of the container element as it can. This results in several different situations depending upon how your code is written. For these examples, I will be floating a small DIV element to the left:

  • If the floated element does not have a pre-defined width, it will take up as much horizontal space as required and available, regardless of the float. Note: some browsers attempt to place elements beside floated elements when the width isn’t defined—usually giving the non-floated element only a small amount of space. So you should always define a width on floated elements.
  • If the container element is the HTML BODY element, the floated DIV will sit on the left margin of the page.
  • If the container element is itself contained by something else, the floated DIV will sit on the left margin of the container.
  • You can nest floated elements, and that can result in the float ending up in a surprising place. For example, this float is a left floated DIV inside a right floated DIV.
  • Floated elements will sit next to each other if there is room in the container. For example, this container has three 100px wide DIV elements floated in a 400px wide container.

You can even use floats to create a photo gallery layout. You put each thumbnail (it works best when they are all the same size) in a DIV with the caption and the float the DIV elements in the container. No matter how wide the browser window is, the thumbnails will line up uniformly.

Turning Off the Float

Once you know how to get an element to float, it’s important to know how to turn off the float. You turn off the float with the CSS clear property. You can clear left floats, right floats or both:

clear: left;
clear: right;
clear: both;

Any element that you set the clear property for will appear below an element that is floated that direction. For example, in this example the first two paragraphs of text are not cleared, but the third is.

Play with the clear value of different elements in your documents to get different layout effects. One of the most interesting floated layouts is a series of images down the right or left column next to paragraphs of text. Even if the text is not long enough to scroll past the image, you can use the clear on all the images to make sure that they appear in the column rather than next to the previous image.

Here are some examples of images floated to the left and to the right.

The HTML (repeat this paragraph):

<p>
<img src="maliwithcar_tn.jpg" alt="Mali with car" class="float" />Duis aute irure dolor sed do eiusmod tempor incididunt in reprehenderit in voluptate. Cupidatat non proident, ut labore et dolore magna aliqua.
</p>

The CSS (to float the images to the left):

img.float {   float:left;
  clear:left;
  margin:5px;
}

And to the right:

img.float {   float:right;
  clear:right;
  margin:5px;
}

Using Floats for Layout

Once you understand how the float property works, you can start using it to lay out your web pages. These are the steps I take to create a floated web page:

  • Design the layout (on paper or in a graphics tool or in my head).
  • Determine where the page divisions are going to be.
  • Determine the widths of the various containers and the elements within them.
  • Float everything. Even the outermost container element is floated to the left so that I know where it will be in relation to the browser view port.

As long as you know the widths (percentages are fine) of your layout sections, you can use the float property to put them where they belong on the page. And the nice thing is, you don’t have to worry as much about the box model being different for Internet Explorer or Firefox.

©2014 About.com. All rights reserved.