CSS Floats

17 July 2006 / 15 Comments

What are floats?

This box is floated right.

A float is simply a box (for example, a div) that is shifted to the left side or the right side of its container. We then say that the box is floated left or floated right.

One of the key benefits of floats is that they allow you to have bits of content sitting side by side, rather than one below the other (much like you can do with table columns, but better!). This allows you to do cool stuff like text columns, boxouts (like the one above), and advanced positioning of your page elements.

Floats are a bit like the align="left" and align="right" attributes in img elements.

The `float` property

Creating a floated element in CSS is very easy. We just use the float property – for example:


  <div style="float: left; width: 100px;">
    A left-floated div
  </div>

  <div style="float: right; width: 100px;">
    A right-floated div
  </div>

Or, using IDs and a separate style sheet:


<div id="leftFloat">A left-floated div</div>
<div id="rightFloat">A right-floated div</div>

.
.
.

#leftFloat
{
  float: left;
  width: 100px;
}

#rightFloat
{
  float: right;
  width: 100px;
}

Some examples of floats

Here are a few simple examples that illustrate the properties of floats, and show some of the things you can do with them.

A left-floated boxout

Here we have a regular (non-floated) column of text, with a left-floated box on the left that the regular text wraps around.


<div style="float: left; width: 100px;
  margin: 5px; padding: 5px; border: 1px solid black;">
  <p>This is our left-floated text box.</p>
</div>
  
<p>
  This is our regular, non-floated column of text.
  This is our regular, non-floated column of text.
  This is our regular, non-floated column of text.
  This is our regular, non-floated column of text.
  This is our regular, non-floated column of text.
  This is our regular, non-floated column of text.
  This is our regular, non-floated column of text.
</p>

This is what it looks like:

This is our left-floated text box.

This is our regular, non-floated column of text.
This is our regular, non-floated column of text.
This is our regular, non-floated column of text.
This is our regular, non-floated column of text.
This is our regular, non-floated column of text.
This is our regular, non-floated column of text.
This is our regular, non-floated column of text.

A right-floated boxout

This is similar to the last example, but this time the box is floated right rather than left.


<div style="float: right; width: 100px;
  margin: 5px; padding: 5px; border: 1px solid black;">
  <p>This is our right-floated text box.</p>

</div>
  
<p>
  This is our regular, non-floated column of text.
  This is our regular, non-floated column of text.
  This is our regular, non-floated column of text.
  This is our regular, non-floated column of text.
  This is our regular, non-floated column of text.
  This is our regular, non-floated column of text.
  This is our regular, non-floated column of text.
</p>

This is what it looks like:

This is our right-floated text box.

Two columns of text

In this example, we use two floats side-by-side to create two columns of text. We use two left-floated divs to do this (not a left float and a right float as you might expect). The second floated div sits to the right of the first floated div.


<div style="float: left; width: 200px; margin-right: 5px;">
  <p>
    This is our left text column.
    This is our left text column.
    This is our left text column.
  </p>
</div>

<div style="float: left; width: 200px; margin-right: 5px;">
  <p>
    This is our right text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
  </p>
</div>

<div style="clear: both;"> </div>

This is what it looks like:

This is our left text column.
This is our left text column.
This is our left text column.

This is our right text column.
This is our right text column.
This is our right text column.
This is our right text column.
This is our right text column.

The `clear` property

You’re probably wondering what this is for:


<div style="clear: both;"> </div>

The clear property is a way of saying “make sure this element does not run alongside a previous float”. By putting a div with clear: both after our floated columns, we’re saying “don’t run this div, or anything after it, alongside our floated columns”.

Without having an element with clear: both after our floated columns, all later content on the page would attempt to flow alongside the columns. (Try it yourself and see what happens!) You could say that we’re telling the browser, “the floats end here”.

Possible values for the clear property are: left (don’t run alongside any left-floated boxes), right (don’t run alongside any right-floated boxes), both (don’t run alongside any left- or right-floated boxes), and none (do nothing). When in doubt, use both.

Rules to remember

If you want to have a right-floated box, you need to put the HTML for the floated box before the non-floated content (not after as you might expect).
In the original CSS version 2 spec you had to specify a width for all floated elements (though the width could be relative, such as a percentage width). In the new CSS2 spec, however, an explicit width is not required.
If you need to have content after a float that shouldn’t run alongside the float, use the clear property.

Go forth and float!

Now that you understand how floats work, try making a few floated boxes yourself, remembering the above rules. Floats are a key part of building CSS layouts, so they’re well worth getting the hang of. You might also like to refer to the official specification of the ‘float’ property.

Comments

mcdrummerman says

12 April 2010 at 8:13 pm

Thanks for this. It was helpful for a beginner.

[Edited by mcdrummerman on 12-Apr-10 20:13]

Reply
matt says

16 April 2010 at 3:04 am

@mcdrummerman: Thanks for the feedback – I’m glad you found the article helpful. 🙂

Reply
yob says

15 May 2010 at 9:45 am

I’ve been using tables for years because I never really grasped the concept of floating divs until I read this article. How simple it can be … thanks for sharing!

Reply
matt says

18 May 2010 at 4:36 am

Thanks yob. I’m happy the article helped you out!

Reply
trebor says

25 July 2010 at 10:32 am

Hi Matt

I have been trying to get my head around CSS v Tables for several months and I have to say the article has helped, however the problem I have is trying to emulate a table.

I have been asked by a local charity to build a basic site I could do it within 1/2 an hour using a table but I have spent three days trying to get this to work in CSS almost to the point of abandoning the CSS route and just putting in a table.

It’s not so much the float it’s getting the content how they want it, is there anyway I could upload the image and seek your advice I am looking for how to do not for you to do.

trebor

Reply
matt says

27 July 2010 at 3:53 am

@trebor: Sure no problem, although we don’t have an image upload facility on this site. How about uploading to http://imageshack.us/ then posting the URL here?

Reply
trebor says

27 July 2010 at 4:50 am

Hi Matt

This is due to go live on August the 5th the table one looks okay to them but I know is unprofessional looking, so if you can have a look and point me in the right direction.

The site is already on a server so I have set up a mock site here is the link http://www.helpinghands-childcare.co.uk/mockSite/index.php

Thanks

trebor

Reply
matt says

27 July 2010 at 5:20 am

@trebor: I didn’t understand the bit about the logo and top bar matching up / staying along side. However it sounds like you want your left and right columns to stay the same height as each other, yes? This is known as faux columns, and is easy to do using a simple repeating background image. Here are some good tutorials on this topic:

http://www.alistapart.com/articles/fauxcolumns/
http://www.communitymx.com/content/article.cfm?cid=afc58

In this case all you need is a 2-pixel-wide image in your dark blue colour that you set as a repeating background image on the container that contains your 2 floated column divs. The container (and background) will then stretch to the height of the tallest column within the container.

Make sense? 🙂

Reply
trebor says

27 July 2010 at 9:49 am

Matt

Okay I will try again
Left column has the logo at the top and navigation below it
Contents / right column has first div Info goes here (Top Info bar) needs to be flexible and immediately below this is the colored band.
The problem I have is getting both the top info bar and the colored bar to sit on top of each other and both along side the logo.

Hope this clearer.

trebor

Reply
matt says

28 July 2010 at 2:09 am

@trebor: Float the logo div left, and create another right-floated div containing both the info bar and color bar.

Not sure what you mean by “flexible” but if you want the layout to be fluid (stretches horizontally to match the width of the browser) then you can specify percentage widths instead of pixel widths for your floated divs.

Does that help?

Reply
trebor says

29 July 2010 at 8:24 am

Hi Matt

Well after a few painstaking hours and a few more grey hairs I think I have cracked it.
http://www.helpinghands-childcare.co.uk/mockSite/test.html

Dreamweaver CS3 does not like the layout throws it all over the place but when viewed in IE looks good Fire Fox puts the color bar a fraction out of line but apart from that fine.

I await your comments

Thanks Again

Trebor

Reply
matt says

1 August 2010 at 5:16 pm

@trebor: Glad you got it working. 🙂 I wouldn’t worry about it not looking right in Dreamweaver – it wouldn’t be the first time. 😉

Reply
vCopia says

2 April 2011 at 11:27 am

Matt,

I had to post and tell you how much I appreciate your taking the time to share a “how to” on floating side by side columns. I spent days searching the web, posting on forums, talking to experienced coding colleagues and no one could sufficiently respond. My coding challenge required I stretched your tutorial one step further, in that I wanted non-floating text to wrap around any white space left beside these two floating columns, on what would become a reusable template page for our blog, and the clarity of your descriptions assisted in me in doing just that.

So, again, thanks. You’ve helped us add a bit of smooth sophistication to our site.

[Edited by vCopia on 02-Apr-11 11:31]

Reply
matt says

4 April 2011 at 5:16 am

vCopia: Thanks very much for your kind words and feedback – much appreciated. 🙂

Reply
mincuu says

6 September 2012 at 8:17 am

thanks guys..

Reply