CSS3 Multiple Columns
Use CSS3 to create a set of columns on your website without having to assign individual layers and / or paragraphs for each column.
Along with multiple background images, this following piece of CSS3 is among 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!
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 create 2 columns using the following css3 code
- 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;
- }
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 create three columns using the following css3 code
- 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 #c4c8cc;
- -webkit-column-count: 3;
- -webkit-column-gap: 1.5em;
- -webkit-column-rule: 1px solid #c4c8cc;
- }
An example for those on alternative browsers not seeing multiple columns above..
The Zen Elements CSS3 Series
- CSS3: Introduction
- CSS3: Border Image
- CSS3: Border Color
- CSS3: Border Radius
- CSS3: Box Shadow
- CSS3: Font Face
- CSS3: Gradients
- CSS3: HSL & HSLA
- CSS3: Multiple Column
- CSS3: Multiple Images
- CSS3: Opacity
- CSS3: RGB & RGBA
- CSS3: Text Shadow
- CSS3: Transform
- CSS3: Transition
Thank you for reading!
@zenelements // Alex
‘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 – column-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.
Love it. I tried forever with tables to create columns.. It never looked quite right.
I’m looking forward to CSS3 becoming the standard and Internet Explorer gets taken out together with the rest of the trash.
sip. very nice and usefull for me. thanks
Great information. I must try this.
Very nice. I really don’t know why it takes so long for browser to play nice with each other. Really, can’t they just create a board and make decisions together about compatibility issues.
using it! love it !
Great! I will be used this information for update my website, thanks
This is really great way of working with functions that will work for clients that don’t think about alignment.
Interesting read — I can’t believe this was first proposed so many years ago without implementation.
Hi,
Really nice article.
Thanks for the useful information.
Very nice tutorial, very helpful for new users of CSS
Very nice – using it on my site. Thank you!
Nice to know and it will definitely reduce the overall coding. Now hope all browsers will understand it.
Great work!!!
Thanks for making the code easy to find by writing it inline. You saved us some searching.