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
0 Comment(s)