CSS3 Multi-column printing of a webpage

Posted by Joel Jensen Sat, 19 Aug 2006 16:43:00 GMT

I have written some reports for a real estate brokerage I am building a site for, they are printouts of all the agents 300 or so. The office uses these as phone lists. They wanted it to print out mulitcolum like MS-Word multicolumn. Trouble is if I made it one huge table spit in 2 columns you would get a-m in column one and n-z in column 2, not flowing on each printed page. Enter CSS3.

I heard about CSS3 support in some browsers, and though I would give it a try in firefox.

<style type="text/css">
  #wrap {
    -moz-column-width:20em;
    -moz-column-count: 3;
    -moz-column-gap: 20px;
  }
</style>

link to docs

Here is the CSS code for a <div id='wrap'>list goes here</div>.

Works great.

Comments

Leave a comment

Comments