updated: February 16th, 2007 / Ross Johnson / 5 Comments

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!

5 thoughts Creating multi-column layouts automaticly in firefox

  1. I will have to give that a try. I just wished more people used gecko based browsers.

  2. 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!

  3. 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

    Max Vlasov
  4. 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;

    Ross Johnson

Comments are closed.