Left, right, left, right: Keeping CSS layouts as simple as possible with paired floats

After a while, CSS becomes intuitive. You find your standard practices that just *work*. All of the maddening annoyances of CSS bugs, margin collapsing and cross-browser compatibility melt away into that part of your brain you save for really special tortures. You probably even have your own HTML/CSS/JavaScript boilerplate by now.

I was puzzling over a box-model diagram today and realized that where I formerly used margins and paddings, I simply use floats and widths to control my columns and gutters. No longer will I ever have more that two floating DIVs in a single parent DIV. Instead, every layout DIV is either a left float or a right float within its parent.

I wish someone would have showed me this approach when I was learning floats. It’s simple and straightfoward, but most of all it’s predictable. Here’s how it works.

<div id="containing-div">
	<div id="floated-left">
		(Content goes here.)
	</div>
	<div id="floated-right">
		(Content goes here.)
	</div>
</div>

That HTML structure sets up a containing DIV and two content DIVs, one floated left and one right. The following CSS assures the float doesn’t break.

#containing-div { width: 960px; }
	#floated-left { width: 440px; float: left; }
	#floated-right { width: 440px; float: right; }

The box model sets up like this.

CSS float diagram

The total width of the two content DIVs must be less than the containing DIV or else the content DIVs will break out of their container. The gutters are the difference between the total width occupied by the two columns minus the total width of the parent DIV. In other words:

Gutter = ParentDIV - (ColumnA + ColumnB)

Again, the total available width in the container minus the content DIV width becomes the gutter, in this case, 960px - (440px + 440px) = 80px. That’s an 80px gutter. That’s it.

What if I want more than a two-column layout?

It’s easy. One of your columns is a top-level column. The other two reside within the other top-level column. In the HTML, there are 4 DIVs.

|  DIV1   |       DIV2         |
|    |    |        / \         |
|    |    |       /   \        |
|    |    |    DIV3 | DIV4     |
|    |    |     /   |    \     |
| content | content |  content |

But when rendered, the website visitor sees three columns side-by-side-by-side.

The space between the columns (gutters) is created not by margin but by empty space. Within each left-right floating pair, the unused available width (from the parent DIV) becomes the gutter. No worry about pushing or shoving to create space—this is simply unused real estate. It’s the alley between two buildings.

Need 8 columns? No problem! There are several ways to achieve this by pairing floats.

DIV1 (float: left)
	DIV3 (float: left)
		DIV7 (float: left)
			content one
		DIV8 (float: right)
			content	two
	DIV4 (float: right)
		DIV9 (float: left)
			content three
		DIV10 (float: right)
			content four
DIV2 (float: right)
	DIV5 (float: left)
		DIV11 (float: left)
			content five
		DIV12 (float: right)
			content six
	DIV6 (float: right)
		DIV13 (float: left)
			content seven
		DIV14 (float: right)
			content eight

Or you could nest the DIVs another way.

DIV 1 (float left)
	content one
DIV 2 (float right)
	DIV 3 (float left)
		content two
	DIV 4 (float right)
		DIV 5 (float left)
			content three
		DIV 6 (float right)
			DIV 7 (float left)
				content four
			DIV 8 (float right)
				DIV 9 (float left)
					content five
				DIV 10 (float right)
					DIV 11 (float left)
						content six
					DIV 12 (float right)
						DIV 13 (float left)
							content seven
						DIV 14 (float right)
							content eight

Same number of DIVs. Way deeper hierarchy. I would probably use the first example if each column was the same width. I don’t know when you’ll need eight columns side-by-side in non-tablular format. But the organization of your HTML should be determined by the content. This example just illustrates that you *can* nest DIVs in various ways. The key is that no single parent DIV has more than two children DIVs.

Hmm… so I just noticed a pattern. It looks like when you have multiple DIVs and you follow this convention, you will have 2(n-1) DIVs in any given container, where n equals the number of pieces of separate content. Interesting.

Clearing

Don’t forget about clearing floats. Include

<div class="clear"></div>

at the end of each floated DIV.

The CSS for .clear would read

div.clear { clear: both; height: 1px; overflow: hidden; }

In fact, you are adding a single pixel of height to your page, which is virtually invisible. Clearing can be considered hacky, and IE6 handles clearing in its own special way. But, really, it’s nearly 2011—are we still talking about accommodating IE6? Nope.

In the end, whatever convention works for you will work itself out over time. I recommend starting out with this paired-float system if you’re new to CSS. Read more about floats here, here and here.

If you have another system or employ this system yourself, let me know.