Use CSS 3 to create a set of columns on your website without having to assign individual layers and / or paragraphs for each column. Along with the +/- quick list of compatible browsers, this is a guide on doing just that…
Along with the multiple background images, this following CSS 3 is on my favourites list. I think there is a lot of great potential for this CSS and in ways more than just a news paper/magazine layouts too! If you have used this in a concept or your own personal website, please do link them below in a comment as I would love to see, as I’m sure many others would too.
Cross Brower Compatibility
The browser that best supports CSS 3 multiple columns is FireFox, Safari and Google Chrome, which means we will concentrate on using the -moz- and -webkit- prefix.
All articles in the CSS3 will be updated in light of future support & development.
CSS 3 Multiple Columns (Width)
One early risen morning, grass layden with dew, Alex awoke with a vision, he knew through and through. It was dark, it was steamy with a heart warming glow. The kettle went on and it’s coffee for all! Okay, so it is maybe not a master piece of a tale but I wanted something here that was not Lorem Ipsum! I think it worked. Coffee anyone?
The above paragraph is set to use CSS 3 multiple columns using the following…
- CSS 3 Multiple Columns (Width)
- #my_CSS3_id {
- text-align: justify;
- -moz-column-width: 15em;
- -moz-column-gap: 2em;
- -webkit-column-width: 15em;
- -webkit-column-gap: 2em;
- }
Current Browser Support (Tested, Jan 2009)
- FireFox (3.0.5)
- Google Chrome (1.0.154.36)
- Internet Explorer (IE6, IE7, IE8…)
- Opera (9.6)
- Safari (3.2.1, Windows)
An example for those on alternative browsers not seeing multiple columns above..
CSS 3 Multiple Columns (Count)
One early risen morning, grass layden with dew, Alex awoke with a vision, he knew through and through. It was dark, it was steamy with a heart warming glow. The kettle went on and it’s coffee for all! Okay, so it is maybe not a master piece of a tale but I wanted something here that was not Lorem Ipsum! I think it worked. Coffee anyone?
The above paragraph is set to use three CSS 3 columns using the following…
- CSS 3 Multiple Columns (Count)
- #my_CSS3_id {
- text-align: justify;
- -moz-column-count: 3;
- -moz-column-gap: 1.5em;
- -moz-column-rule: 1px solid #dedede;
- -webkit-column-count: 3;
- -webkit-column-gap: 1.5em;
- -webkit-column-rule: 1px solid #dedede;
- }
Current Browser Support (Tested, Jan 2009)
- FireFox (3.0.5)
- Google Chrome (1.0.154.36)
- Internet Explorer (IE6, IE7, IE8…)
- Opera (9.6)
- Safari (3.2.1, Windows)
An example for those on alternative browsers not seeing multiple columns above..
Zen Elements Blog | CSS3 Series
- CSS3: Introduction
- CSS3: Border Radius
- CSS3: Border Color
- CSS3: Shadows
- CSS3: Background Images
- CSS3: Multiple Column
- CSS3: Embedding A Font Face
- CSS3: Opacity
- CSS3: RGBA
- CSS3: HSL & HSLA
Subscribe to RSS or Email so you don’t miss the next article!
Thanks for reading,
Alex | Zen Elements
‘Cross Brower Compatability’
‘… means we will concentraite’
Just some spelling mistakes I picked up on, :).
Good article! I look forward to CSS3 becoming more mainstream, hopefully soon!
@Matt:
Nope. No such errors. Don’t know what you’re talking about.. *admits shyly* spelling was not a strong point in there.
Thanks for highlighting ;)
this i fu$@!$# great =)
one question… what’s this for? -> column-rule: 1px solid #dedede;?
cheers
@Santiage | Thank you, I’m glad you enjoyed this and I’m certainly looking forward to when it is greater support cross-browser.
The code you mentioned – colum-rule: 1px solid #dedede; – is to create a verticle border line between the columns. This I have found currently only to work well in Safari.
That’s great. I hate use php parsers to get nice looking columns like I would get with this simple code. But there is no other way with ~15% IE6 Users…
Great little bit of tutoring there!
You might want to change the column width in the “by width” example to something smaller, like 10em. I don’t know what CSS reset (if any) you’re using, but on my Dell 2408 with FF3 the column width is wide enough for the text, and there’s only one column generated. Playing with Firebug, 15em makes two, while 10em makes three. :)
Just FYI…
@Ben | Thank you! The error will have snuck in after I did a little redesign of the blog a while back where I reduced the display width, thereby creating this slight hickup. Glad you enjoyed the tutorials and thank you for the heads up on that! Alex.
# Internet Explorer (IE6, IE7, IE8…)
# Opera (9.6)
I hope it will support soon.
using it! love it!!
It’s a pity that sites with much text and information, that could take advantage of this technique, are visited during office hours with unable browsers. Unfortunately it is difficult to get a fallback.
I love this. I can already see so many uses for between the multiple sites that I manage. It’ll be nice when CSS3 is ratified and we can stop with the browser extensions and go with the real CSS3 properties.