Understanding CSS Floats

Using css floats effectively can be confusing and it’s probably one of the things that trips up most people when they’re first learning css. However once you learn to control floated elements it opens up a whole new world of possibilities in your design and makes developing layouts much simpler.

And best of all floats really aren’t that hard to work with once you understand a few key points.

What is a Float?

A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or “floated” or “floating” box) is that content may flow along its side (or be prohibited from doing so by the ‘clear’ property).
— w3.org

The float property has 3 values; none, which is the default, left, and right. As much as you might wish it so there is no center value. Horizontal centering in css is accomplished through margins.

Floats sit as far left or as far right as possible within the immediate containing div. Depending upon the available width where a float is declared, other elements can sit next to a floated element or flow around it.

The Difference Between Floats and Positioning

In css there are 3 types of positioning schemes. From w3.org

1. Normal flow – In CSS 2.1, normal flow includes block formatting of block boxes, inline formatting of inline boxes, relative positioning of block or inline boxes, and positioning of run-in boxes.
2. Floats – In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float.
3. Absolute positioning – In the absolute positioning model, a box is removed from the normal flow entirely (it has no impact on later siblings) and assigned a position with respect to a containing block.

Relative positioning shifts elements relative to their position in the normal document flow. Other elements are not affected and lay where they would had no positioning been applied. This leads to the possibility that elements with relative positioning may overlap surrounding elements on the page.

Note that floats are taken out of the normal document flow, but floats do affect the position of elements around them.

How to Effectively Use Floats

There are two main ways floats are used.

Text Flowing Around An Image

Images are the most common, but you can substitute a different element. The idea is that text will wrap around some element.

This was the original intention of the floated element. You float an element left or right and allow other elements, usually text to flow or wrap around the element. When using floats in this fashion you want to have both the floated element and the wrapping text inside the same containing element.

{code type=html}

Lots of text here. Enough to wrap around the image.

{/code}

{code type=css}
img.alignleft {float: left; margin: 0 10px 10px 0}
{/code}

In the above code both the floated element and the wrapping text are contained within the same paragraph.

Notice that in the css I’ve added a right and bottom margin. It’s good practice when floating an image to add a little space between it and the wrapping text. Left floated images get a right margin and right floated images get a left margin. Both have a margin added to the bottom. 10px is arbitrary and you could use padding instead of margins if you choose.

Column Layouts

Because floats allow two block level elements (such as divs) to sit up against each other, it’s easy to use them to create columns.

{code type=html}

{/code}

{code type=css}
#left-column {float: left}
#right-column {float: left}
{/code}

Float both column divs above to the left and you have two columns. You would also need to make sure the combined widths of the two column divs can fit inside the width of the wrapper div. Alternately you can float the right column to the right, but I usually prefer floating both in the same direction.

Add a header div above the two columns and a footer (with the clear property applied) below and you have a nice and simple 2 column css layout.

One last tip when floating an element. Always set a width on the floated element. Not setting one could have unintended consequences.

Clearing Floats

Often with floats you’ll want to ensure an element that follows one or more floated elements sits below those floated elements. The solution is the css clear property.

Clear takes the values left, right, both, none (default), and inherit. In practice you’ll only use the first 3 and most of the time you’ll use clear: both.

Perhaps the most common use is to clear your footer div so it sits below your 2 or 3 floated columns.

Containing Floats

The first thing to consider when containing floats is to make sure the containing element is wide enough to hold the floated elements you want to sit next to each other. If you float two elements left in order to create a two column layout and the combined with of the floats is greater than the width of the containing element, one of the floated elements will drop to the next line.

I mentioned above that floated elements are taken out of the normal document flow. This leads to an interesting and confusing issue when all the elements inside a containing element are floated.

A common place you might see this is when you have a header div and the only elements inside is a logo image which you float left. You also apply a css background-image to the header, but it doesn’t show up.

The issue is that the header div contains the single floated image and and because that image is no longer in the normal document flow, the header div considers itself to be empty and has no height. The containing div has essentially collapsed on itself. There are a few ways to deal with this problem.

You could explicitly set a height on the container div. This would work fine in the header example above, but may not be feasible in all cases of collapsed containers. Sometimes you’ll want to add an empty div that you clear below the floated elements.

{code type=html}

{/code}

This works well if it’s ok to have a little extra space below the floated elements. Some browsers may apply a default height, margin, padding, etc. to the empty div.

The last method is to use the overflow property on the containing element. You’ll generally use overflow: hidden, but depending on your situation you may prefer to use overflow: auto or use overflow-y instead of using it in both directions. Overflow prevents the containing element from collapsing.

Issues With Floats

In addition to collapsing containers there are a few issues with floats to be aware of.

Older versions of IE have a double margin bug. If you float an element in one direction and also add a margin on the element in the same direction (left/left or right/right), IE doubles the margin.

A simple solution is to set display: inline on the floated element. Alternatively you can use conditional comments to set a different margin for IE or for a specific version of IE.

Another common issue is adding elements inside a floated element whose width is wider than the width of the floated element. You might for example add an image inside a floated div and the image is wider than the div itself.

Depending on the browser this could lead to your floated element being wider than you intended or it could lead to content overlapping your image. Make sure elements inside a floated element aren’t wider than the floated element.

One last issue to look out for is that of the disappearing bottom margin. The bottom margin of a floated element inside another floated elements might be ignored. The simple solution is to use padding instead of margin when that happens.

Summary

When people first learn css they tend to gravitate toward absolute and relative positioning for layouts, since both seem simpler on the surface. It’s generally better practice to use floats and if you remember a few key points you should be able to understand and to control floated elements in your layout.

• Floats are laid out in normal document flow and then shifted as far left or right within containing elements and removed from normal document flow.
• Elements can flow around floated elements as long as there is enough horizontal space to contain them. If there’s not enough space the elements will display below the floated element
• Floats and positioned elements are different and behave in different ways. You can’t apply both to the same element.
• Use floats when you want text to flow around an element or to create columns in a layout
• Remember to clear elements that you want to fall below floated elements and to keep containing element from collapsing
• Find solutions you’re comfortable with to a few common float issues in Internet Explorer

I hope the above helps clear up some of the confusion you might have using css floats. If you have more questions about them please ask and I’ll do my best to answer. Here are a few other good posts about floats that you may find helpful.

• CSS Float Theory: Things You Should Know
• All About Floats
• Floatorial

« Prev PostNext Post »

Download a free sample from my book, Design Fundamentals.