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
    • 316
    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.


        .main{width: 500px;margin: 0 auto;}
        .col{width: calc(100%/3);float: left;}{background-color: red;}{background-color: blue;}{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>

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


 0 Comment(s)

Sign In

Sign up using

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: