CSS Beginners Guide part 15 - Multiple Columns

CSS Multiple Column, web designers must aware of this because this feature save a lot of time, this feature divide the single text layout into multiple layouts, we can set the gap between dividing layouts using column-gap property and we set the rules to column gaps like width, height, and color using column-rule.

Managing the Columns
the column-count property is used to specify the number of to element divided into, we can specify the gap between columns using column-gap and we can set the rule to columns using column-rule.

<style>

// the text div divided into 3 parts

div{

column-count:3;
-ms-transform: 3; // IE Browser
-webkit-transform: 3; // for Safari and Chrome
-moz-transform: 3; // for Mozilla
-o-transform: 3; // for Opera


//creating gap between columns

column-gap:30px;
-ms-transform: 30px; // IE Browser
-webkit-transform: 30px; // for Safari and Chrome
-moz-transform: 30px; // for Mozilla
-o-transform: 30px; // for Opera


//creating rule to columns

column-rule:5px outset #ff0;;
-ms-transform: 5px outset #ff0; // IE Browser
-webkit-transform: 5px outset #ff0; // for Safari and Chrome
-moz-transform: 5px outset #ff0; // for Mozilla
-o-transform: 5px outset #ff0; // for Opera

}

</style>


//HTML CODE

<div>

put some big text here

</div>