Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Creating Multiple Columns in CSS3

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 146
    Comment on it

    CSS3 Provides Column Property to layout the content in form of columns like done in News Papers, Magazines and Books. Column include multiple properties which are as follows.

    1. column-count
    2. column-gap
    3. column-rule
    .textBox{
        width: 900px;
        background: #eee;
        text-align: justify;
        border: 1px solid #000;
        padding: 10px 10px;
    
        -moz-column-count:4; /* Firefox */
        -webkit-column-count:4; /* Safari and Chrome */
        column-count:4;
    
        -moz-column-gap:50px; /* Firefox */
        -webkit-column-gap:50px; /* Safari and Chrome */
        column-gap:50px;
    
        -moz-column-rule:4px outset #ddd; /* Firefox */
        -webkit-column-rule:4px outset #ddd; /* Safari and Chrome */
        column-rule:4px outset #ddd;
    }
    <div class="textBox">
    Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
    </div>
    

    Image Loading

 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: