Monday, 12 September 2011

Multi-Column Layout

Another CSS3 feature that developers and designers, can  start using is the Multi-Column Layout. It offers a new way to arrange text in more of a “news paper” way. You have the choice to select the number of columns, the column width, gap between two columns, and column separator. A feature like this was not possible before CSS3. Here is how you do it:
   text-size: 12px;
  -moz-column-gap: 1em; /* For Mozilla: */
  -moz-column-rule: 1px solid #000;
  -moz-column-count: 3;
    -webkit-column-gap: 1em;  /* For WebKit: */
  -webkitcolumn-rule: 1px solid #000;
  -webkit-column-count: 3;

*Note:The column-space-distribution is not yet  implemented, this feature is to describe how to distribute leftover space.IE browsers like IE6,IE7,IE8 are not supporting.

No comments:

Post a Comment