nicholasjon.com

CSS Sleeves

Sometimes, it’s hard to write good XHTML. I don’t mean it’s hard to write well-formed XHTML, once you start doing that it’s nearly impossible to allow yourself a single unclosed p-tag. I mean sometimes, when there’s a deadline sitting in the chair right next to you, things like semantics get ignored while a few extra bits of markup get thrown in.

Take a deep breath, this sort of behavior is okay.

Sure it’s not ideal, and I hope the standardistas don’t take away my ALA t-shirt for saying so. It is something that happens, and it’s something we need to handle without just whacking something in with a table. (Shudder.)

This is a technique I use in those situations I call “sleeves.” It’s particularly handy when I need to get a few columns or other content containers in place “um, like now.” I’m particularly fond of little trick actually as it involves only a single bit of extra markup per container, and it completely circumvents cross-browser box model inconsistencies. It’s quick to implement, and it’s essentially bulletproof.

You start by “framing” your page — let’s say we’re doing a three column, “wide narrow narrow” layout. We could write some CSS to the effect of:

div.wide { width: 60%; float: left; } div.narrow { width: 20%; float: left; }

... to go along with some XHTML like:

<div id="box1" class="wide"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris nulla.</p> </div> <div id="box2" class="narrow"> <ul> <li><a href="">Link #1</a></li> <li><a href="">Link #2</a></li> <li><a href="">Link #3</a></li> </ul> </div> <div id="box3" class="narrow"> <ul> <li><a href="">Link #4</a></li> <li><a href="">Link #5</a></li> <li><a href="">Link #6</a></li> </ul> </div>

Great. But we can’t add borders, margins, or paddings to these boxes because of what the IE box model will do to you. We could apply the well-known Tantek’s box model hack to get around this, but there’s some math to do to make sure everything width-related comes out even — and we’re in a gosh darn hurry.

Simple. Drop in some sleeves.

For each of your containers, drop in another div inside of it:

<div id="box1" class="wide"> <div class="sleeve"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris nulla. </p> </div> </div> <div id="box3" class="narrow"> <div class="sleeve"> <ul> <li><a href="">Link #1</a></li> <li><a href="">Link #2</a></li> <li><a href="">Link #3</a></li> </ul> </div> </div> <div id="box3" class="narrow"> <div class="sleeve"> <ul> <li><a href="">Link #4</a></li> <li><a href="">Link #5</a></li> <li><a href="">Link #6</a></li> </ul> </div> </div>

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.