Categories
CSS

All About Floats

Practically everything you need to know about CSS layout in a single, simple page.

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]

By Jeffrey Zeldman

“King of Web Standards”—Bloomberg Businessweek.

Principal & Creative Director, Automattic, Inc. Founder & Publisher, A List Apart. Co-founder, An Event Apart design conference. Publisher & co-founder, A Book Apart—brief books for people who design, write, and code. Have written two books, notably Designing With Web Standards, 3rd Edition. Faculty, MFA, Interaction Design program, School of Visual Arts, NY. Host, The Big Web Show. But what I really want to do is direct.