29 May 2009 8 am eastern

All About Floats

Float is a CSS positioning property. If you are familiar with print design, you can think of it like an image in a layout where the text wraps around it as necessary.

So begins  All About Floats, a brief and unassuming tutorial which, with a single web page of text and a few illustrations, thoroughly explains how designers use “float” to create CSS layouts, the difference between “float” and absolute positioning, and the leading browser quirks to keep in mind when using float to create web layouts.

If CSS confuses you, this page will greatly help you. If you’re an old hand at CSS layout, this page will make a handy reference for you. This page is not new, but it was new to me. Congratulations to author Chris Coyier on a job elegantly done. Hat tip to Elliot Jay Stocks for pointing it out.

[tags]CSS, layout, essentials, overview, tutorial[/tags]

  • Facebook
  • Google Bookmarks
  • Posterous
  • Tumblr
  • Twitter
  • RSS
  • LinkedIn

Filed under: CSS

4 Responses to “All About Floats”

  1. minestrone: when the design meets the usability of the technology said on 29 May 2009 at 4:56 pm:

    [...] All About Floats Float is a CSS positioning property. If you are familiar with print design, you can think of it like an image in a layout where the text wraps around it as necessary. So begins  All About Floats, a brief and unassuming tutorial which, with a single web page of text and … 23 May 2009 [...]

  2. serdar said on 30 May 2009 at 12:04 pm:

    Here is another dated but good article about floats: http://www.autisticcuckoo.net/archive.php?id=2004/12/10/floating

  3. Aidan said on 31 May 2009 at 6:37 pm:

    This article is actually brilliant – it’s a great introduction to the float property for anyone.

    Anything that teaches print designers more about how CSS works is a good thing. The very definition of pain is a front-end developer being handed a design by a print designer.

  4. Chris Coyier said on 1 June 2009 at 8:41 pm:

    Wow, I’m floored. =) Thanks for the link and the kind words Jeffrey. I enjoy attempting to explain CSS concepts in as plain of English as possible. I just attempted the box model today.

Comments off.