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!