Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Multiple column using CSS3

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 73
    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:

    div {
        -webkit-column-count: 4; /* Chrome, Safari, Opera */
        -moz-column-count: 4; /* Firefox */
        column-count: 4;
    }
    

    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:

    div {
        -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
        -moz-column-gap: 40px; /* Firefox */
        column-gap: 40px;
    }
    
    div {
        -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
        -moz-column-rule-style: solid; /* Firefox */
        column-rule-style: solid;
    }
    
    div {
        -webkit-column-rule-width: 2px; /* Chrome, Safari, Opera */
        -moz-column-rule-width: 2px; /* Firefox */
        column-rule-width: 2px;
    }
    
    div {
        -webkit-column-rule-color: blue; /* Chrome, Safari, Opera */
        -moz-column-rule-color: blue; /* Firefox */
        column-rule-color: blue;
    }
    
    div {
        -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
        -moz-column-rule: 1px solid lightblue; /* Firefox */
        column-rule: 1px solid lightblue;
    }
    

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

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: