Using Calc() Function

As mentioned above, we can use calc() to determine lengths like widthheightmargin,paddingfont-size, etc. To measure, we can use Mathematical expressions: Addition, Subtraction, Division and Multiplication.

For an example, let’s say, we have three <div> within a wrapper, as shown below.

  1. <div class=”col one”>A</div>
  2. <div class=”col two”>B</div>
  3. <div class=”col three”>C</div>

With calc() function, we can easily set these <div> into columns with equal width this way.

 

  1. .wrapper .col {
  2.     width: calc(100% / 3);
  3.     padding: 0 10px;
  4. }

The following Mathematical operation calc(100% / 3); divides 100% of the parent width by three and here is how it turns out in the browsers. The three <div> are having equal width.

Advertisements