Ahh. We cringed a little to pop in some extra markup there, but it’s okay. We’re on schedule. Now, just add in a little CSS to finish the job:

div.sleeve { padding: 0px 5px; margin: 0px 5px; border: 1px dotted #999999; }

Our divs are now comfortably bordered and spaced. Nothing broke, wrapped, or otherwise caused us to curse under our breath that it might have been easier to get that physics degree after all. Fabulous.

Sleeves work because they allow you to specify margins, paddings and borders on elements other than the ones on which you specify widths — thereby avoiding box model hacks entirely. Another benefit they give you is the fact you can use any units you like on a sleeve — avoiding potentially painful calculations as you figure out how many ems you have left to make a border in pixels. (Ouch.)

For even greater control, you can target individual sleeves with specific CSS selectors to, say, not have a left-hand margin on box1’s sleeve:

div#box1 div.sleeve { margin-left: 0px; }

You can even use sleeves inside sleeves to create columns that contain columns… but we’ll save that for another example.

This technique has, on more than one occasion, saved me from enduring hours of pixel-tweaking, width-calculating and hacking. It would be nice if we didn’t need to resort to little bits of extra markup to achieve this sort of development speed, and it would be even better if we didn’t even have to worry about things like conflicting box models, but here we are. (And IE7 is coming.)

Here’s a sample HTML file with columns and “sleeves” holding everything together. Let me know in the comments if you find this technique useful, and certainly let me know if you have better ideas or suggestions.