Log in

No account? Create an account
To The Side

Dear CSS,

I love you, man. I really do. You're like a brother to me. But you and me and these web developers here need to sit down and have a little intervention with you.

I know that you've go a lot on your mind right now, but there's some things that we need to talk about with you, dude.

First I just want to say that I love your styles. That's not what we're here to talk about, but it's something I really wanted to give you some kudos for. font, font-style, border, text-decoration, color, background, you are awesome. Those things are so good, I just wanna hug them, most of the time. text-decoration and I have had our differences, but I've learned to work around them, and I'm pretty good now.

And the cascade? The cascade is pretty sweet.

But CSS...your positioning sucks. I know it, these web developers here know it, and it's something that we really need to talk about. It's been happening for a long time, and all of us here really would like you to think pretty hard about bringing some changes into your life.

It's not a big overhaul or anything. It's just a few things that we'd really love to see. There's just a few things. Everybody here really loves you man. We mean it. There's just a few small, little things that would really help make all of us happier, and maybe they're things that could help you feel better about yourself, too:

  • All I want for Christmas is the ability to position a box relative to another box that is not the container. Like, say, something like: position: relative-to #other_box top-right; top: 0; left: 0;, and then the top-left of my box would be aligned to the top-right of #other_box. Then I would never have to wrangle with float ever again, except when I wanted to have some text spill around a box.
  • Then while we're at it, I'd really love to be able to specify the size of a box (either horizontal or vertical) as being identical to another box. Maybe something like: width: #other_box and height: #other_box. Tables do this. They did it in 1996. Now it's 2010, and I think that this is something we all would love, but without the tables. So it's something for you to think about; it would really help us out.
  • Since we're talking about height, it would also be awesome to have a way to say "this should be the height of its container but no larger". You'd think height: 100% would do that, but no, that seems to make the box the height of its content, at least the last time I tried it (yesterday). That's OK, though, we love you even though you're eccentric, CSS. I think we just need a little something different, here.
  • I can't say how much I'd love to be able to vertically center something in a box. Some of the less-informed members of this little sit-down here might think that vertical-align has something to do with vertically aligning things in boxes. But no, no, it doesn't. It was a bit of a trick that CSS pulled on us, and we understand that there were some reasons, so we're annoyed, but understanding.
  • While we're at it, wouldn't it be nice to have a single, simple way to center anything horizontally in its containing box? margin: 0 auto usually works. I mean, if you wrap the contents in a table so that they auto-size. (That's a whole other issue, though, possibly solved by display: table?) Sometimes you have to use text-align: center, though. That's fun, but not really what we meant. Then sometimes there's no way at all, which isn't so fun.
  • If you felt really nice, letting me specify z-index on non-positioned elements and having it actually work would be really awesome. That's just if you feel like it, though. I know that there's a lot of other stuff to think about, here, and and I want you to take your own time to do it, and think about it for yourself.

Those are all the things that we'd need. I know that life is pretty difficult for you right now, what with CSS3, HTML5, quirks mode, standards mode, specs, working groups, modules, errata, and everything. So this isn't something I expect overnight. But it's time for us to say that there's millions of people that you're affecting, with your behavior, and we've given you so much love. Couldn't you just give us a little?

For Serious,


Tags: , ,


The lack of these features is why typically still just laid out my web pages with tables. Keeping things in appropriate clean alignments is just so much simpler that.

Note that if you implement the first element properly, it actually negates the need for the second. In the UI setup we have at work, we have the ability to position the top, bottom, left and right of any box independently based on any other element. So, if I want to match another element's width, I position the left side relative to other box's left side, and the right side relative to the other box's right side. There are also pixel offsets with this position, so I can, for instance, "match" the width, but inset 5 pixels on both sides, or position one box's top 5 pixels below another box's bottom. (Yea, I know this could all also be accomplished with margins, but I actually find it more intuitive with these offsets.)

The "gotcha" with this kind of positioning is draw or layout order. You need to be careful that the element you're positioning relative to is laid out earlier. In our UI code, we have to specify things in the right order, or the relative positioning will throw errors. If you wanted to be more advanced, you could attempt to sort the layout order based on the positioning dependencies, but if you're not careful, it's fairly easy to setup recursive dependencies that can't be resolved. Forcing you to put it in the file in the right order for this positioning forces you to think about these dependencies, making it much less likely that you'll accidentally create such a situation.
Er, note that I DO use CSS positioning on the rare occasions that I need dynamic elements, which move or overlap other elements. In those cases, CSS is really the only way to go. But just for basic layout, when you have a roughly grid-aligned sidebar, header, etc., the lack of clean relative positioning just makes CSS positioning more of a hassle than it's worth.
Yeah, I more or less do the same, unless I'm specifically trying to be very fancy with CSS, either to educate myself or to demonstrate that I can.
Yeah, I think a lot of people end up using tables for this reason.

That sounds like an interesting system. Yeah, recursive deps are a problem for sure, but I'm sure that they'd get spec'ed out in some sensible way, like "if you encounter an element you've already encountered, treat it like it's 'width: auto'", or something.