Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Use of css Property calc()

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 310
    Comment on it

    Hello readers !

    In this blog we will discuss on a css property named calc().

    What is calc() ?

    This is a way to change simply any numeric value in CSS automatically. like height, width, margin, padding, font-size, background-position etc and you can use mathematical expressions like addition (+), subtraction (-), division(/) and multiplication(*).

    We usually do it using Jquery as it will saves time.

     width: calc(100% - 50px);
    

    In this the width will 100%-50px for every view screen.

    Below example will clear your doubts.

    css:-

        .main{width: 500px;margin: 0 auto;}
        .col{width: calc(100%/3);float: left;}
        .col.red{background-color: red;}
        .col.blue{background-color: blue;}
        .col.green{background-color: green;}
    

    Html :-

       <div class="main">
            <div class="col red">1</div>
            <div class="col green">2</div>
            <div class="col blue">3</div>
        </div>
    

    Here you see the three div will divide with same width:- Below is output

    Testing
    1
    2
    3

 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: