Objectives and outcomes

In this tutorial we are going to learn about calc() function in CSS. calc() is used to perform arithmetic calculation on some CSS attributes like width, height etc.



CSS stylesheet:

<style>
.container1
{
/* Calculating the width */
width: calc(100% - 60px);

background-color:#585858;
color:#FFFFFF;
text-align:center;
padding:20px 0;
margin: 0 auto;
}
</style>


HTML code:

<html>
<body>
<div class="container1">
<p>This div has 20px on either side.</p>
</div>
</body>
</html>