Understanding CSS Float

Using the CSS float property to design webpage layouts

Laptop with CSS word on screen. Learn CSS, web development

hardik pethani/Getty Images

The CSS 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:

class="right" /> 

What Can You Float With the CSS Float Property?

You can’t float every element on a webpage. You can only float block-level elements. These are the elements that take up a block of space on the page, like images, paragraphs, divisions, and lists.

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, line breaks, strong emphasis, or italics.

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 you float an image to the left, any text or other elements following it will flow around it to the right. And if you float an image to the right, any text or other elements following it will flow around it to the 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.

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 on how your code is written. For these examples, you will be floating a small

DIV
element to the left:
  • If the floated element does not have a predefined 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 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.

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.

The HTML (repeat this paragraph):

Duis aute irure dolor sed do eiusmod tempor incididunt in reprehenderit in voluptate. Cupidatat non proident, ut labore et dolore magna aliqua.

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 viewport.

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.