Introduction
Tables for layout are finally on their way out. CSS-based layouts are the future, and floats are the key technique for creating multi-column designs. If you're still using table-based layouts, it's time to make the switch.
CSS floats can be tricky to master, but once you understand how they work, you'll be able to create flexible, semantic layouts that separate content from presentation. This is what web standards are all about.
Understanding the Float Property
The CSS float property was originally designed for wrapping text around images, like in a newspaper:
img {
float: left;
margin: 0 10px 10px 0;
}But clever designers discovered that floats could be used to create column layouts. When you float an element, it's removed from the normal document flow and shifted to the left or right until it touches the edge of its container or another floated element.
The Three Values
Float has three possible values:
float: left– Element floats to the leftfloat: right– Element floats to the rightfloat: none– Element doesn't float (default)
A Simple Two-Column Layout
Let's create a basic two-column layout:
<div id="container">
<div id="sidebar">
<p>Sidebar content</p>
</div>
<div id="main">
<p>Main content goes here</p>
</div>
</div>#container {
width: 960px;
margin: 0 auto;
}
#sidebar {
float: left;
width: 200px;
background: #f0f0f0;
}
#main {
float: left;
width: 760px;
background: #fff;
}Both columns float left, sitting side by side. The widths add up to the container width (200px + 760px = 960px).
The Clearfix Problem
Here's where things get tricky. When all children of a container are floated, the container collapses to zero height:
<div id="container">
<div class="box">Floated box</div>
<div class="box">Floated box</div>
</div>.box {
float: left;
width: 200px;
height: 100px;
}
#container {
background: #ccc; /* You won't see this! */
}The container has no height because floated elements are removed from the normal flow. This is a major problem.
The Clearfix Hack
The solution is the "clearfix hack" – a technique that's become essential for float-based layouts:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hide from IE Mac \*/
.clearfix {
display: block;
}
/* End hide from IE Mac */Apply this class to any container with floated children:
<div id="container" class="clearfix">
<div class="box">Floated box</div>
<div class="box">Floated box</div>
</div>Now the container will properly contain its floated children.
The Clear Property
The clear property prevents elements from appearing next to floated elements:
clear: left; /* Clear left floats */
clear: right; /* Clear right floats */
clear: both; /* Clear both left and right floats */This is useful for footer elements that should appear below floated columns:
<div id="sidebar" style="float: left;">Sidebar</div>
<div id="main" style="float: left;">Main content</div>
<div id="footer" style="clear: both;">Footer</div>A Three-Column Layout
Let's build a more complex three-column layout:
<div id="container" class="clearfix">
<div id="header">
<h1>My Website</h1>
</div>
<div id="sidebar-left">Left sidebar</div>
<div id="main">Main content</div>
<div id="sidebar-right">Right sidebar</div>
<div id="footer">Footer</div>
</div>#container {
width: 960px;
margin: 0 auto;
}
#header {
background: #333;
color: #fff;
padding: 20px;
}
#sidebar-left {
float: left;
width: 200px;
background: #f0f0f0;
}
#main {
float: left;
width: 520px;
background: #fff;
padding: 0 20px;
}
#sidebar-right {
float: left;
width: 200px;
background: #f0f0f0;
}
#footer {
clear: both;
background: #333;
color: #fff;
padding: 20px;
}The three columns (200px + 560px + 200px = 960px) sit side by side, with the footer clearing below them.
Box Model Calculations
Be careful with the box model when using floats. Padding and borders add to the total width:
#sidebar {
float: left;
width: 200px;
padding: 10px; /* Adds 20px to total width! */
border: 1px solid #ccc; /* Adds 2px to total width! */
}
/* Total width is now 222px, not 200px */This can break your layout if you're not careful. Always account for padding and borders in your width calculations.
Common Float Problems
Problem 1: IE6 Double Margin Bug
IE6 doubles the margin on floated elements. The fix:
#sidebar {
float: left;
margin-left: 10px;
display: inline; /* Fixes IE6 double margin bug */
}Problem 2: Collapsing Containers
Solution: Use the clearfix hack on the parent container.
Problem 3: Content Dropping Below
If floated elements are too wide for their container, they'll drop below. Check your width calculations, including padding and borders.
Problem 4: Text Wrapping Issues
Text in adjacent elements can wrap around floated elements unexpectedly. Use clear or set overflow:
#main {
overflow: hidden; /* Contains floats and prevents wrapping */
}Fixed vs Fluid Layouts
Fixed width layouts use pixel dimensions:
#container {
width: 960px;
}Fluid layouts use percentages:
#sidebar {
float: left;
width: 25%;
}
#main {
float: left;
width: 75%;
}Fluid layouts adapt to different screen sizes, but can be harder to control. Fixed widths give you precise control.
Practical Example: Blog Layout
Here's a complete blog layout:
<div id="container" class="clearfix">
<div id="header">
<h1>My Blog</h1>
<p>Thoughts on web development</p>
</div>
<div id="nav">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</div>
<div id="content" class="clearfix">
<div id="main">
<div class="post">
<h2>Post Title</h2>
<p>Post content...</p>
</div>
</div>
<div id="sidebar">
<h3>About Me</h3>
<p>Sidebar content...</p>
</div>
</div>
<div id="footer">
<p>© 2009 My Blog</p>
</div>
</div>* {
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
background: #f5f5f5;
}
#container {
width: 960px;
margin: 20px auto;
background: #fff;
}
#header {
background: #333;
color: #fff;
padding: 30px;
}
#nav {
background: #666;
}
#nav ul {
list-style: none;
}
#nav li {
float: left;
}
#nav a {
display: block;
padding: 10px 20px;
color: #fff;
text-decoration: none;
}
#nav a:hover {
background: #555;
}
#content {
padding: 20px;
}
#main {
float: left;
width: 620px;
}
.post {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #ddd;
}
#sidebar {
float: right;
width: 280px;
background: #f0f0f0;
padding: 20px;
}
#footer {
clear: both;
background: #333;
color: #fff;
padding: 20px;
text-align: center;
}Browser Testing
Always test your float layouts in multiple browsers:
- Firefox 3: Generally good CSS support
- Internet Explorer 6/7: Lots of float bugs, test thoroughly
- Internet Explorer 8: Much better, but still test
- Safari: Good standards support
- Opera: Excellent standards support
IE6 in particular requires extra attention and often needs specific hacks.
Alternatives to Floats
Floats aren't the only option for layouts:
Absolute positioning: More precise, but harder to maintain
Display table: CSS table display properties (not widely supported yet)
Negative margins: Advanced technique, can be fragile
For now, floats are the most reliable cross-browser method.
The Bottom Line
Float-based layouts are the cornerstone of modern CSS design. They're not perfect – the clearfix hack is inelegant, and IE6 bugs can be frustrating – but they work reliably across browsers and allow for flexible, semantic markup.
The key is understanding how floats work: elements removed from normal flow, sitting side by side until they run out of room. Master the clearfix hack, learn to debug common problems, and always account for the box model in your calculations.
With practice, float-based layouts become second nature. You'll be able to create complex, multi-column designs that look great in all browsers. And most importantly, your markup will be semantic and your content separate from presentation – the way the web was meant to be built.
