Calc(): Math On-The-Fly In Your CSS
What web developer or web UX designer does not love the power and flexibility of CSS to position an element. There are so many approaches available, like flexbox, grids, and columns that automatically adjust layouts. Recently, I made a new friend in the CSS world. I’m proud to share with you, “calc()”.
calc(), yes like the name suggests, CSS calculations on-the-fly!! (Wah!?!?!)
The most common situation for using calc() that we run across is when a sibling element needs to act like it’s nested inside its preceding sibling. Calc() has saved me multiple times in this situation and best of all is that you don’t need complicated JavaScript or media queries to make things work. All the calculations happen with CSS, so rendering on the page is many times faster as well.
So how does it work?
And what I’m talking about? ( faint confused crowd whispering in the background )
First an example of the basic syntax giving the “right” position some calc() attributes:
.element {
right: calc( 100% - 20px );
}
Simple right? Our example situation will use the following HTML structure to show how the two sibling divs will pretend as if one is nested inside the other::
<div class="full-width-container">
<div class="center-content-with-max-width">
[ mumble-jumble content text... ]
</div>
<div class="off-center-object">
<img src="https://admin.texascreative.com/some-image.png"/></div>
</div>
Visual example:
Now the design calls for a layout to be adjusted like this:
This layout is really easy to do if we have control over the HTML, by bringing the ‘.off-center-object elements’ within the ‘.center-content-with-max-width’ div. But let’s say for the sake of this example that you can't edit the HTML structure and all you got is CSS to make adjustments.
The CSS code for the basic layout of the desing looks like this:
.full-width-container {
width: 100%;
position: relative;
background: #CCC;
padding: 10px;
}
.center-content-with-max-width {
width: 100%;
max-width: 600px;
margin: 0 auto;
background: white;
padding: 10px;
}
We get the layout looking like this:
Now let’s make the image show off to the right. As if it was inside ‘.center-content-with-max-width’. We’ll use calc() on the “right” property to create a faux-padding that always matches the auto margin on .center-content-with-max-width;
.off-center-object {
width: 250px;
height: 250px;
position: absolute;
top: 20px;
right: calc(((100% - 600px) * 0.5) + 10px);
}
.center-content-with-max-width {
padding-right: 270px;
}
Here is our final result:
Here is a graphic representing what just happened:
This is just an example of how calc() can be used in your projects, but it can be used for more than just setting the right or left properties. It can be used to set font sizes, paddings, and almost anything where you would need to set a specific pixel size on using a combination of integers, pixels, percentages, view-width and even view-height to make intricate calculations as you desire.
One example of calc() that I’m proud of is crosslandoilfieldservices.com – in the home page rotator I used a frosted glass effect. To achieve that I had to create a copy of the background image, apply a blur mask and position it just right. (to understand how this works check out my frosted glass effect tutorial). The position of the frosted window and the image within it are dynamically adjusted even when the browser window is resized. I know it’s hard to explain and understand right off the bat, but what you need to know is that it does all the complicated positioning on the fly with CSS. The only other way to do this in the past would be using JavaScript.
The possibilities are endless with a bit of mathematical brain power. I hope this helps you with your next project.
Happy Coding!