UPDATE: There was a one character bug in this, you should update.

I absolutely hate CSS. It has to be the most inconsistent, poorly designed, bat shit fucking crazy piece of computing technology we have today. And remember, I used to code Ruby and Perl for a living. If I'm saying CSS is bat shit crazy I mean it.

My first problem with CSS is simply that it just never does what you tell it to. I say, "make this a column CSS" and it goes, "What? No that should go over here totally on the left and fuck you I like apples." I say, "make this fill all of the parent div" and CSS says, "Sharks love tiny needles, and no that will only take up the top part." I say, "Hey, CENTER THIS" and CSS says, "My shoes have centered worms but your heading will stay to the left."

I would die without Firebug to help me figure out why CSS is doing whatever the hell it's doing.

It's so inconsistent, not based on any specific algorithmic theory, has no mental model a mere mortal can understand, uses dated terminology only a print designer from the 1500's comprehends, and just generally pisses off my sense of right and order in the world.

Let's not even begin to talk about how it defies all of computing for the last 50 years by not having variables. I motherfucking love sprinkling randomized color sequences all over my damn styles. I love not being able to say "this thing is like that thing" and instead having to deal with the "cascade", because you know that shit's so much easier than established decade's old concepts of inheritance and binding.

Seriously, in 20 years, when the world looks back on us, they'll wonder why the fuck we struggled for decades with something so fucking weird. In the meantime though, I gotta relearn this shit so I've been plowing through books and retraining my brain. In the process I've uncovered an excellent bit of CSS that's helping me out.

I'm going to share this secret with you as my attempt to recover order in the world.

Grids

I've been reading basic design books for print and most of them advocate a grid. Grids seem to be an established part of visual design, so it baffles me why CSS is just so completely horrible at grids. You see, the XML of tables may have been ugly, and especially if nested, but at least they were a damn grid that did what you expect a grid to do. No clearing, or floating, or other idiotic hacks to invent a grid. Just make a table.

Tables have become a sign that you are old and don't get web design. Shit maybe I just don't get stupid. Ever thought of that? Maybe I like my computing technology to have clear understandable names that do exactly what they're told.

In order to establish the new world order, all the front-end weenies came up with this totally table-less design, and with a Jazz hands level of hand-wavy bullshit declared it "semantic". Right, semantic, because "clear" and "float" makes so much fucking sense to everyone. Ohhhh they mean, "lots of divs replace lots of table/tr/td". Not semantic, since that doesn't mean anything close to what they think it means.

After going through all the different CSS tricks books out there (what an industry that shit is) and using various frameworks like 960.gs I stumbled on a tiny amount of CSS that brings back sanity to the grid layout without using tables. Using this tiny little bit of CSS I was able to completely ditch my use of grid frameworks and make my layout do exactly what I fucking tell it to do.

I present, the Oxymoron CSS Framework:

body {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
}

.oxymoron {
    display:table;
    width: 100%;
    border-collapse:collapse;
    border-spacing:10px;
}

.notarow {
    display:table-row;
}

.notarow > div {
    display:table-cell;
}

That's the entire thing. You can now keep your XML/HTML free of table tag junk and still get sane correctly operating grids that do what the fuck you tell them to do. You say it's 300px wide, it's 300px wide. Done.

Oxymoron Is Not A Table

Just to make sure I'm not branded a heretic and can still be included in the famed halls of "design gurus" I haven't named these with table-like names. Nope, I've use notarow just so you know, it's not a row. Since saying some display element in a grid is a "row" is the kiss of death for your design, I have said it's not a row very explicitly. I've also removed any need to say something is a column, it's just assumed that the div that's inside the div that's not a row is a column.

Of course, this doesn't work in some old ass browsers, but I sort of don't care.

What's it look like? Well in my hands it looks like racoon ass baking in the desert sun, but I'm sure someone else will take it and sex it up a bit. You can peep a look at my next little Mongrel2 based project I worked on last night: fmlr. That page doesn't do shit, it's just a first stab at a simple layout for the idea.

How'd I do that? I picked some random colors. I made the grid with Oxymoron. I put shit in the grid using Lorem ipsum text. I then added the colors and kept tweaking where stuff went. That's it. No clearing and floating and background z-index div hackery. Just a damn grid, exactly how it should be mother fuckers. A fucking grid. Without tables.

Enjoy.