10 Line Marvel: 3 column CSS only layout (No tables)

Back when I were a wee lad, typin on an amstrad PC 6128 with feet not reachin the floor, my geeky brother convinced my father to buy the magazine 'amstrad user' once or twice.

Our favourite regular feature was called something like '10 Line Marvels' -- these were programs, written in basic, just 10 lines long, that did extraordinary things.

It would take more than ten lines to describe the marvel that those programs represented. Can you imagine, for example, a ball bouncing around the screen? now imagine it in ten lines. impossible. (hint, it relies on a trick)

This was in the days somewhat prior to including a DVD on the cover of your magazine. Two gig of code was slightly unthinkable. Ten lines of type-it yourself was just do-able. (Type-your-own roulette wheel programs were pretty darn impossible to compile... jeb got there in the end ;+) )

Anyway, ten lines of my code, these days, is mostly whitespace and comment. So i'm not gonna try and marvel you.

This ain't gonna be marvelous

Here's a table-less 3 column CSS layout in ten lines. The only reason I mentioned the above reminiscence is because this happened to fit into ten lines, exactly. Hint: the nasty trick is that you specify the right column before the middle column.

Example of how it is expected to look:

it looks like 3 columns, left is red, middle yellow, right blue

Credit due to pixy for their 3 column layout, which informed this one (in just 120 lnes). And due to my skinnyband limitations, i haven't tested this in the flaming-fox.

(Later: I've found something about these '10 liners' (for the Amstrad CPC) see Sean McManus's Article... (quoted below):


I'm currently writing a book about how to build your first product. If you want to build your first product, please sign up to be notified when the book is available.

(By the way, I read every comment and often respond.)

Your comment, please?

Your Name
Your Url (optional)
Note: I may edit, reuse or delete your comment. Don't be mean.