Tuesday, January 24, 2012

Multi-column layout

CSS3 has new properties with which one can create a multi-column layout (sort of like in a newspaper). So far it's only supported in Firefox and Safari 3 but not in IE.
Below is the code for both Safari 3 and Firefox that creates 3 columns with a 1em space between them

/*IE - not supported yet*/
column-count: 3;
column-width: 13em;
column-gap: 1em;

/*Mozilla*/
-moz-column-count: 3;
-moz-column-width: 13em;
-moz-column-gap: 1em;

/*Safari*/
-webkit-column-count: 3;
-webkit-column-width: 13em;
-webkit-column-gap: 1em;

No comments:

Post a Comment