Creating multi-column layouts automaticly in firefox
Firefox 1.5+ has a pretty cool feature that will split a div into columns via Mozilla specific css. Its pretty simple and easy, and is controlled by these simple css tags.
-moz-column-count
-moz-column-width
-moz-column-gap
moz-column-count states how many columns to split the div into, width specifies the width, and gap specifies the gutter.
2 Column Example
250px wide columns, with 10px gutter
Now I can go ahead and type into this paragraph tag, with out any consideration on where the content should be broken over the second column. The gecko browser will simply divide the content in half and split it up for me. I considered putting lorum ip sum in here, however it is much easier to see how the content will read by using an actual paragraph that makes sense. Hopefully this is long enough to get the idea, as I am running out of ideas. My creativity tonight is not great, I would like to say that I am just burnt out but more than likely I am ready for a beer.
3 Column Example
150px wide columns, 10px gutters
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam semper. In ullamcorper auctor lectus. Suspendisse potenti. Suspendisse potenti. Aenean eu leo. Suspendisse ac risus vel odio consectetuer consequat. Sed nulla. Phasellus eros purus, dapibus eu, rutrum nec, auctor in, nulla. Aliquam metus. Integer cursus, ante at tincidunt fringilla, lectus massa tempor diam, ultrices faucibus diam massa porta arcu. Curabitur ullamcorper, dolor vitae faucibus vehicula, nisi eros tincidunt nibh, varius eleifend mi ipsum quis arcu. Aliquam ornare sagittis eros. Aenean mauris tellus, pulvinar nec, faucibus eu, convallis sed, lectus. Curabitur quis ipsum. Integer justo risus, viverra eget, tincidunt ac, vulputate vitae, dolor. Aliquam mattis fermentum nibh.
Pretty cool eh? It degrades nicely if a user doesn’t have a gecko based browser – just by linearizing it all!
Did You Like This Post?
- Author: Ross Johnson
- Date: Thursday, February 15, 2007
- Comments: 5 Comments
- Categories:
About This BLOG
Since inception, this blog has covered a plethora of topics. Excited by all things design, I spent six years with out a focus. A year ago I discovered my true passion... designing with psychology (primarily as it related to the web). Many thanks to my Web Design Agency, 3.7 DESIGNS that gifts me time to publish my findings.
The Latest Buzz
You should follow us on twitter here.
Popular Posts
We recommend
That is cool.
I will have to give that a try. I just wished more people used gecko based browsers.
I agree LGR – Luckily the W3C has a very similar multi-column layout spec’d out for CSS3 – we just need to get to that point!
Thanks for the multicolumn example, Ross. The simplicity of the rule has inpspired me for a stylish extension: http://userstyles.org/styles/19498. It took very few time to implement so you will probably will have suggestion for improvements. Thanks
Very nice idea Max I like it a lot! Did you try using the webkit based column rules for Safari and Chrome?
-webkit-column-count: 3;
-webkit-column-gap: 1em;
-webkit-column-rule: 1px solid black;