WebsitesIQ

CSS Math Functions

CSS math functions allow to use math expressions in CSS.

`calc()` function

This function allows using a calculation to calculate a value for the property. + - * / operators can be used in this function.


#target-div {
  color: white;
  background-color: blue;
  width: calc(100% - 200px);
}

Live Demo!

Output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et fermentum augue. Mauris nisl velit, interdum sed erat eget, vestibulum suscipit mauris. Phasellus varius maximus neque, ut mollis ante vulputate in. Suspendisse placerat fermentum sapien, rutrum eleifend tortor fringilla in. Morbi et aliquet leo, interdum pulvinar lacus. Curabitur pellentesque tristique nulla sit amet ullamcorper. Pellentesque luctus commodo orci ut euismod. Suspendisse ante nibh, malesuada in fringilla vel, imperdiet sit amet metus. Morbi suscipit eros vel felis cursus, vel blandit arcu fermentum. Duis tempus nec velit a dapibus. Quisque molestie, massa quis tincidunt blandit, leo orci fermentum felis.

In the above example, width of the div is calculated using the calc() function. So the final width is 200px less than the total 100% width.

`max()` function

This function is used to select the largest value in all the present values in the function which are separated by commas.


#target-div2 {
  background-color: rgb(239, 228, 226);
  height: 250px;
  width: max(60%, 450px);
}

Live Demo!

Output:

`min()` function

This function is used to select the smallest value in all the present values in the min() function which are separated by commas.


#target-div3 {
  background-color: rgb(239, 228, 226);
  height: 250px;
  width: min(50%, 400px);
}

Live Demo!

CSS Math Functions

calc() function

Output:

max() function

Output:

min() function

Output:

Try our state of the art website builder now!

`calc()` function

`max()` function

`min()` function