The CSS Blog, just CSS. (Tips, Tricks, Tutorials, Resources and more!)

Note: This article is meant for CSS beginners.

On Part 1 we focused on static, relative, absolute and fixed positioning. In the second part we will focus on the float property.

The float property is definetly one of the most used properties in CSS. You really have to know it because is vital to create our layouts.

Let’s get started…

First, take a look at this article’s guinea pig. We’ll experiment on it.

By default in our HTML pages, elements have a 100% width and they place themselves one on top of each other.
Floats exist in order to change this. Their main aim is to show elements parallel to each other.
Also when you float something, it’s width reduces just to fit it’s content (unless you specify a determined width size), and stops having the full width of the browser.

Everything will become clearer when we see some examples. Let’s proceed…

The float options

These are:

• float:left;
• float:right;
• float:none;

We can float anything. Divs, paragraphs, images, lists, any HTML tag.
The way to use it is always the same, but sometimes we use floats for pieces of content and other times for blocks in order to create a layout.

Let’s float

To explain myself better, I will separate the examples in floats related to content and floats related to blocks, but it’s really the same thing don’t worry.

Floating content

The CSS

img {float:left;}
blockquote {float:right; width:230px;}

I’m defining a width for the quote to look more compact.

The result

Floating content result (View source or inspect with Firebug).

You see how the elements flow along with them instead of being one on top of the other? That’s cool. However, there is a problem there.

The problem

• The #content element looses the correct bottom padding.

Let’s proceed to block floating and we’ll fix this problem in just a sec.

Floating blocks

The CSS

#wrapper {width:800px; margin:50px auto;}
	#content {float:left; width:450px;}
	#sidebar {float:right; width:200px;}

Why do we define a width for our wrapper element?

Because floats need to be contained. Otherwise, they will end up floating to the edge of the browser. Sometimes that is useful, but not generally.
Two examples of what happens if we have a containing element for floats or not:

Floats without a container element:

Floats with a container element

The result

Floating blocks result (View source or inspect with Firebug).

That looks awful!

The problems

• The #main element is not holding two of it’s children (#content and #sidebar)
• The #footer element is totally jammed.

As I told you, both examples have problems. Of course the second one is the most obvious. Don’t freak out, this was supposed to happen. Let’s solve the problems with one line.

Clearing floats

The sister property of floats is clear.

The clear property has three possibilities as well:

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

This property will be the one that will solve our problems. Basically the clear property is the one that says: “Hey! Stop floating guys”.
It must be applied to the first element that will not float located after an element currently floating.

Huh? Don’t worry, here you have two examples:

Clearing content

The CSS

#last {clear:both;}

The example

Clearing content example (View source or inspect with Firebug).

I’m clearing both, because I have elements floating left (images) and other floating right (blockquote). If I only have left floating elements, I can just clear left. The same case for elements floating right.

Clearing blocks

Same idea. The thing I don’t want to float is the footer. Let’s apply a clear to it:

#footer {clear:both;}

Now the footer is clearing the #content and #sidebar elements. This helps the container element (#main), to succesfuly wrap around it’s children once again.

Clearing blocks example (View source or inspect with Firebug).

That’s easier than you expected right?

What about float:none;?

Float none is used to override previous floats. If nothing is floating, the float none property won’t do anything. Float none doesn’t mean clearing a float! They are two different things.

Example:

#wrapper div {float:left;}

I’m telling all the divs inside an element with id ‘wrapper’ to float left.
If I don’t want the last div inside #wrapper to float, I should apply an id to it and make an override.

#wrapper div {float:left;}
	#wrapper #lastDiv {float:none; clear:both;}

So that’s the use for float none. I also used a clear to stop the floating chain inside the #wrapper element.

Fixing floats when not having a clearing element

Sometimes we can’t have a clearing element right next to the last floating element. For example:

HTML code

<ul>
	<li>First list item</li>
	<li>Second list item</li>
	<li>Third list item</li>
	<li>Fourth list item</li>
	<li>Fifth list item</li>
</ul>

CSS code

li {float:left;}

So what do we do?

This?

HTML code

<ul>
	<li>First list item</li>
	<li>Second list item</li>
	<li>Third list item</li>
	<li>Fourth list item</li>
	<li>Fifth list item</li>
	<li class="last"></li>
</ul>

CSS code

.last {float:none; clear:both;}

No way! That works fine, but is really nasty.

The solution:

Actually, there are two.

Solution 1 (floating + width)

Give the parent element of the floats a float too and a width.

CSS code

ul {float:left; width:100%;}

Why a width? Because floated elements have an automatic width as I told you before. The UL must have a 100% width to wrap around all it’s list items.

This works in every browser. However, it has a problem. Sometimes giving elements a width of 100% is problematic. This happens in cases in which we have paddings for example. And on top of this, we need to give the next element (after the ul) a clearing property also.

To work around this, here is another solution:

Solution 2 (overflow hidden)

ul {overflow:hidden;}

We must give an overflow hidden (auto works too) to the container element of the floats. This works perfectly in Firefox, Opera, Safari, Chrome and IE8. Most of the times in IE6 and IE7.

To fix it in IE6 and IE7 browsers, take a look at one of my previous articles.

This will always work when you don’t have a fixed height. Why? Because if we have a fixed height the overflow property will either not show the content or add scrollbars, and that sucks.
If you have a fixed height for the floating container use the first solution.

See a live example of solution 2.

Float stacking

I think this is worth mentioning because some people get puzzled with this too.
Floats stack horizontally. This stacking is not the same for left floated elements than right ones.

Left stacking:

This is simple. Now let’s look at float right.

Right stacking:

Take a look at this in an HTML example (View source code or inspect with firebug)
You see? The first element is actually the last one visually. Keep that in mind when you are floating right.

Internet Explorer 6 (IE6) and floats

Sometimes when you float elements in IE6, a known bug called: ‘The double margin bug‘ may appear.

What does the bug do?

As it names suggests, the browser duplicates the margin of the floated element.
This issue can break our layouts; we must fix it.

How can you prevent it?

By never giving the floated element the same direction of it’s margin.
If you float left, don’t use margin-left. If you float right, don’t use margin-right.

Can’t prevent it? the solution:

You can use this hack if you can’t help using the same side margin:

* html div {display:inline;}

It works great. Don’t really ask why. It’s IE6 :p

Optional download

Download all the example files here

Final thoughts

I hope this second article helped you to understand the second part of CSS positioning: floats. This is actually one of the most complex stuff in CSS. You have to practice in order to get a hang of it. When you succeed in controlling it, it’s totally worth it.

Thank you all for the support in this first week of the blog and see you soon with more articles