Chicken Scratches

Student: I just learned CSS and I'm very excited about it! It seems like a nice clean and logical way to do layout. Look, I can just say color:red and my text turns red.

Guru: Oh yes, it's soo much better than using tables. Tables are bad, bad, bad! Never use tables!! You'll ruin us all!!!

Student: Um, ok. No tables. But say, I have a question. I'm trying to make my links look like buttons, but when I set a width on them nothing happens. What's that all about?

Guru: Duh! Don't you know, you can't set a width on an inline element? You have to set display:block .

Student: Ah, I see. So now I can set the width, but it just puts each link on a separate line by itself. What if I want three or four on the same line? They're not very wide after all. Could I maybe just use a ta-

Guru: Nooooo! No tables, I said! Look, it's very easy and logical. Just set a fixed width and set float:left on all the items you want on the same line. Why would you not think of that?

Student: Ah, of course, float:left . I guess that should have been obvious.

Guru: Very good.

Student: But wait.

Guru: Now what is it?

Student: Now my buttons are all squished up with the text that comes after them, even if I put a <br> tag after them. Why is it ignoring my <br> tag?

Guru: Don't you know? You should never use the <br> tag! That's mixing layout with content. It doesn't work after floated elements, anyway. You have to make an empty <div>, put it after all the buttons, and set clear:both on it.

Student: Ah, of course. Why didn't I think of that? We wouldn't want to have extra markup who's sole purpose is for layout, would we?

Guru: Of course not. Empty divs and wrapper divs don't count. At least they're not tables.

Student: Ok, now how do I center them?

Guru: What?

Student: I want to center my table of buttons. How do I do that?

Guru: Well, first of all, it's not a "table" of buttons. Don't ever let me hear you use that word again. It's a "list" of buttons. Turn them into a list. Then it's very easy to center them. Set list-style-type:none. Then set display:table, but only in Firefox. You need to use conditional HTML comments for IE. Then set margin-left:auto. That's how we center things, of course. Oh yeah, and you have to enclose the whole thing in another wrapper <div>. Then set text-align:center on the wrapper. See, easy as pie. Aren't you glad we're not in the bad old days, when we used to have to write hacky HTML just to make the layout work?

Student : Maybe I'll go into marketing. (exit stage left)

We've created an online contest
To see who can rhyme the bestest
So come to our site
And prove you can write
The limerick that rates the highest.

Sorry, that's what happens when you try to write a limerick after four hours of reading technical specification documents. If you think you can do better, come to our limerick contest website and make an entry, read and rate other entries, and waste some time.

For the developers, the contest site is hosted on Django with a MySQL backend.

There will be a new category of limerick writing contest every month. This month's theme is cheese. Enjoy!

• Go to the limerick contest.