CSS Rules!

I don’t know how designers start work. I used to draw masses of squiggles, and then remove all the lines that didn’t fit. It’s probably not a good method for websites. Maybe they do the same; I don’t know.

All I know is that at some point they drag rulers, guidelines or keylines across the page, to help them line up the elements. Then they hand us the resulting PSD file, which we break up into nice little segments for conversion to HTML and CSS.

My idea: use rulers in CSS.

The impossible problem

My designer has, quite reasonably, handed me a design with columns. The columns look a bit like this:

x a y b z
x a y b z
x   y   z

For the sake of argument, they’re all text divs, and I want them variable length, but I want the bottoms of a and b to match, and the bottom of x, y and z to match.

That’s a pretty nasty challenge for CSS, but a piece of piss in PhotoShop.

The simple solution

Now imagine I could define a CSS Ruler or two:
^myruler {
orientation: horizontal;
}
^myruler2 {
orientation: horizontal;
}

And apply it to my DIVs:
.a, .b {
rule-bottom: myruler;
}
.x, .y, .z {
rule-bottom: myruler2;
}

Instant lineup. Wouldn’t that just be awesome?