Creating multi-column layouts automaticly in firefox
February 15, 2007 @ 6:23 pm | Comments (5) | by Ross Johnson
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!
« I predict the next big web design trend Writing Effective Marketing Copy on the Web »
COMMENT Mya
That is cool.
Posted on 02/16 11:31am
COMMENT LGR
I will have to give that a try. I just wished more people used gecko based browsers.
Posted on 02/23 6:11pm
COMMENT Ross Johnson
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!
Posted on 02/24 11:22am
COMMENT Max Vlasov
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
Posted on 07/15 7:30am
COMMENT Ross Johnson
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;
Posted on 07/15 8:36am