css3 multiple columns Layout

the multi-column layout module is a (w3c) candidate recommendation.multi-column layout enables content to be flowed into multiple columns,which retain a gap and an optional rule between them.it also makes it possible to vary the number of columns based on the size of the browser window.

see the following column properties:-

  • column-width
  • column-rule
  • column-count
  • column-gap
  • column-span

css3 multicolumn layout


Css3 multi column property browser supports

propertybrowser support
multi-column layout

internet explorer 10, firefox,  chrome,  opera,  safari support the multi-column layout properties.

chrome and safari require the perfix -webkit-.

mozilla firefox requires the perfix -moz-.

column count and width -

the column-count css property describes the number of columns of the element.

the column-count syntax:-

                  column-count:  (number of columns)  |  auto;

the column-width css3 property specifies the optimal width of the columns in a multi-column element.

the column-width syntax :-

               column-width:  <length>  |  auto;
       <style  type"text/css">
       
  div {
  
  		     background-color:#ed3779;  color:#ffffff;
  		     
       		 column-width:auto;    column-count:3;
       		 
       		 -moz-column-width:auto;   -moz-column-count:3;
       		 
		     -webkit-column-width:auto;  -webkit-column-count:3;
       }
       </style>

column-gap and column-rule properties

the column-gap css property sets the size of the gap between columns for elements which are specified to displays as a multi-column element.

the syntax:-

                column-gap:  (length)  |  normal;

the column-rule css3 property specifies a straight line, or 'rule', to be drawn between each column.

see the following column-rule properties:

  • column-rule-color  :- this property sets the color of the column rule.
  • column-rule-width :- this property sets the width of the rule between columns.
  • column-rule-style  :- this property sets the style of the rule between columns of an element.

the syntax :-

               column-rule: <column-rule-width> | <column-rule-color> | <column-rule-style> |  ;
   <style  type"text/css">
   
 div {
 
           background-color:#ed3779color:#ffffff;
           
           column-gap:3px;    column-rule:thick inset blue;
           
           -moz-column-gap:3px;    -moz-column-rule:thick inset blue;
           
           -webkit-column-gap:3px;   -webkit-column-rule:thich inset blue;
       }
       </style>

column-span

the column-span property describes how many columns an element spans across.

the syntax:-

          column-span: none | all;
          h2 { column-span:allbackground-color:gold;

multiple columns properties

propertydescriptioncss
columnsshorthand property for setting column-width and column-countcss3
column-widthdescribes the width of columns in multicol elements.css3
column-countdescribes the number of columns of a multicol element.css3
column-gapsets the gap between columns.css3
column-rulea shorthand property for setting all column-rule properties in one declarationcss3
column-rule-colorspecifies the color of the rule between columns.css3
column-rule-widthspecifies the width of the rule between columns.css3
column-rule-stylespecifies the style of the rule between columns.css3
column-spandescribes how many columns an element spans across.css3
column-fillspecifies how to fill columns.css3