Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Multiple column using CSS3

    @swati.kothiyal
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 241
    Comment on it

    Hello all,

    Here I am sharing some information about how to get multiple columns layout using css3.

    By using css3 column-count property we can divide an element into number of columns. Here is an example:

    1. div {
    2.     -webkit-column-count: 4; /* Chrome, Safari, Opera */
    3.     -moz-column-count: 4; /* Firefox */
    4.     column-count: 4;
    5. }

    This will divide the text in the div into 4 columns.

    We can also add the following properties:

    column-gap : It is used to give the space to the rules between columns. We can give column-gap in pixels.

    column-rule-style : It is used to give any style to the rules between columns like giving it colour or any other style property.

    column-rule-width : It is used to give the width to the rules between columns.

    column-rule-color : We can give colour to the rule by using this property.

    column-rule : It is a shorthand property which is used for setting all the above column-rules-* properties.

    Example:

    1. div {
    2.     -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    3.     -moz-column-gap: 40px; /* Firefox */
    4.     column-gap: 40px;
    5. }
    6.  
    7. div {
    8.     -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
    9.     -moz-column-rule-style: solid; /* Firefox */
    10.     column-rule-style: solid;
    11. }
    12.  
    13. div {
    14.     -webkit-column-rule-width: 2px; /* Chrome, Safari, Opera */
    15.     -moz-column-rule-width: 2px; /* Firefox */
    16.     column-rule-width: 2px;
    17. }
    18.  
    19. div {
    20.     -webkit-column-rule-color: blue; /* Chrome, Safari, Opera */
    21.     -moz-column-rule-color: blue; /* Firefox */
    22.     column-rule-color: blue;
    23. }
    24.  
    25. div {
    26.     -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
    27.     -moz-column-rule: 1px solid lightblue; /* Firefox */
    28.     column-rule: 1px solid lightblue;
    29. }

    Hope this will help you to understand the multiple-column-layouts. :)

    css3
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: