Multiple columns using CSS3
I know...I live in my own dream world...but this is good fun if you have the latest CSS3 compatible Browser to view it on. With the rise of CSS3 support you are now able to create a column based layout with just one div Tag and some neat CSS. Yes, that's ONE div Tag...no floats or any of that fiddly stuff.
How it works
Depending on support for this when you are reading this article you may need to include the '-moz' and '-webkit' prefixes to get this to work in Firefox, Safari and Chrome but, for the purposes of the demo, the code I show will be as if not needed. Just bear that in mind before coming back and saying it doesn't work!
The CSS code will look a little something like this;
#columns2 {
text-align: justify;
column-width: 200px;
column-gap: 10px;
}
And the resulting 2 column layout looks like this;
There goes the siren that warns of the air raid, Then comes the sound of the guns sending flak. Out for the scramble we've got to get airborne, Got to get up for the coming attack. Jump in the cockpit and start up the engines, Remove all the wheelblocks there's no time to waste. Gathering speed as we head down the runway, Gotta to get airborne before it's too late. Running, scrambling, flying, Rolling, turning, diving, going in again. Running, scrambling, flying, Rolling, turning, diving, Run, live to fly, fly to live, do or die. Won't you run, live to fly, fly to live, Aces high! Move in to fire at the mainstream of bombers, Let off a sharp burst and then turn away. Roll over, spin round to come in behind them, Move to their blindsides and firing again. Bandits at 8 O'clock move in behind us, Ten ME-109's out of the sun. Ascending and turning our spitfires to face them, Heading straight for them I press down my guns. Rolling, turning, diving, Rolling, turning, diving, going in again. Rolling, turning, diving, Rolling, turning, diving, Run, live to fly, fly to live, do or die. Won't you run, live to fly, fly to live, Aces high!!!
You can split the text into as many columns as you like. Here is the CSS for a four column version;
#columns4 {
text-align: justify;
column-count: 4;
column-gap: 10px;
column-rule: 1px dotted #666;
}
And here is the resulting layout;
There goes the siren that warns of the air raid, Then comes the sound of the guns sending flak. Out for the scramble we've got to get airborne, Got to get up for the coming attack. Jump in the cockpit and start up the engines, Remove all the wheelblocks there's no time to waste. Gathering speed as we head down the runway, Gotta to get airborne before it's too late. Running, scrambling, flying, Rolling, turning, diving, going in again. Running, scrambling, flying, Rolling, turning, diving, Run, live to fly, fly to live, do or die. Won't you run, live to fly, fly to live, Aces high! Move in to fire at the mainstream of bombers, Let off a sharp burst and then turn away. Roll over, spin round to come in behind them, Move to their blindsides and firing again. Bandits at 8 O'clock move in behind us, Ten ME-109's out of the sun. Ascending and turning our spitfires to face them, Heading straight for them I press down my guns. Rolling, turning, diving, Rolling, turning, diving, going in again. Rolling, turning, diving, Rolling, turning, diving, Run, live to fly, fly to live, do or die. Won't you run, live to fly, fly to live, Aces high!!!
If you are just getting the text in a single block in your Browser then I'm afraid it doesn't support this CSS3 property. It's not just printed media style layouts this could be used for either. I can certainly see the potential for some cracking Web 2.0 layouts using this CSS3 property. Soon we will be able to let our imaginations run wild. It is just a shame (as ever) that there is that significant time lag between CSS recognising what designers want and the Browsers supporting it.
