Using the CSS Float Property

Web Page Layouts are Easy with the CSS Float Property

There are many ways to create great layouts on a web page, but one of my favorite methods is to use the float CSS style property. But in order to lay out your pages with float you need to understand the float property.

CSS float Syntax

This property defines whether and how a box element should float.

Default: none

Inherited: no

Applies to: all elements

CSS level: CSS1

Value Description
none The element is not floated. It will display on the page where it occurs in the HTML. This is the default value.
inherit The element inherits the float property from its parent element.
left The element floats to the left.
right The element floats to the right.
initial The element is set to its initial default value for float.

What Can You Float and How Do They float?

While you can apply the float property to all elements, it only really affects block-level elements. These are elements that create blocks of text or other content. These are elements like: <p>, <blockquote>, and <table>. The one inline element that you can reliably float is the <img> element.

When you build an HTML document, the elements are displayed in what is called the normal flow. This means that they are placed in the web browser in the order they appear in the HTML. If they have no defined dimensions, like a paragraph of text, then the element takes up the full width of the browser and as much height as it needs. Elements with dimensions, like images, are placed in the flow beside the preceding element if there is enough room. If not, they are placed below. Browsers, by default, avoid adding horizontal scroll bars unless there is no other way to get the content on the web page.

When you place the float property around an element, it is removed from the normal flow and positioned to the far right (float: right;) or far left (float: left;) of the containing element. All content after the floated element is still in normal flow and flows around the floated element.

How to Float an Image

To float an image to the left, add the following CSS to your style sheet:

And then add the class left to the image:

soap-bubble-61246_640Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut magna in eros elementum consectetur sit amet quis erat. Phasellus molestie porttitor dui vel commodo.

Nulla ut egestas risus. Pellentesque sagittis, urna faucibus bibendum scelerisque, lorem lorem imperdiet augue, sit amet mattis augue lacus non turpis. Curabitur eleifend justo sed commodo sollicitudin.

To float an image to the right, add the following CSS:

And then add the class right to the image:

soap-bubble-61246_640Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut magna in eros elementum consectetur sit amet quis erat. Phasellus molestie porttitor dui vel commodo.

Nulla ut egestas risus. Pellentesque sagittis, urna faucibus bibendum scelerisque, lorem lorem imperdiet augue, sit amet mattis augue lacus non turpis. Curabitur eleifend justo sed commodo sollicitudin.

Turn Off CSS float With the clear Property

The clear propery works with the float property to turn off the float. Once you clear a float on an element following the floated element, the content will start in normal flow directly below the floated element.

For example, above you see a bubble image with two paragraphs of text beside them. If you add the clear: both; style to the second paragraph, that will move that paragraph to below the image, rather than beside it.

soap-bubble-61246_640Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut magna in eros elementum consectetur sit amet quis erat. Phasellus molestie porttitor dui vel commodo.

Nulla ut egestas risus. Pellentesque sagittis, urna faucibus bibendum scelerisque, lorem lorem imperdiet augue, sit amet mattis augue lacus non turpis. Curabitur eleifend justo sed commodo sollicitudin.

Using float for Layout

It’s easy to use the float property for your layouts with the following steps:

  1. Design the layout—I prefer to draw out my layouts on paper, but you can use a graphics program or just do it in your head.
  2. Draw boxes around the main areas of your page. Consider things like your header, footer, main content, and aside content.
  3. Write your HTML using sectioning elements like <section>, <article>, and <header> to define the different areas.
  4. Give every element a width, in either percentages or pixels.
  5. Add CSS float properties and clear properties to put the elements in the correct spaces.

If you want to create two columns, you simply float the first column to the left and the second to the right. If you want to create three columns, you should surround the first two columns in another <div> element. Then treat those two columns as a two column layout, and the <div> and the third column as another two column layout. For example:

Don’t Be Afraid of the CSS float Property

The CSS float property is a very useful property. The best way to get comfortable with using it is to try it out. You can use it in most blog software by simply adding style="float: right;" to your images (in HTML view). Then all your text will flow around that image on the left side. Once you’re comfortable adding it to images, try adding it to blocks of text or other elements and see what happens.