Use Cases For CSS Calc
Where I play around with CSS calc operations.
Published by Vincent Pickering
If you know the height of the element, CSS Calc can make it super simple to position an element vertical centre and respect a responsive layout.
By using this simple equation:
50vh is always half the height of the viewport, so we position the element half way down the screen. But this isn’t the absolute centre because we haven’t taken in to account the height of the object. So we need to remove half the height of the object from the distance to get the final result.
100% fluid width next to a fixed element
This is my most common use of calc, often used on layouts with main area and a sidebar, for example. When dealing with a responsive layout and we need one area to fill the space and the other to be a fixed width (which could also be controlled via media queries for extra flare).
Element 1, our fluid container, is simply calculated using the following formula:
So long as you are also using border-box, then adding padding, margins etc will also be taken in to account by the 100% width and automatically adjusted accordingly.
Background positioning from the right side
Chris Coyer has already covered this, but it’s worth mentioning if you haven’t seen it, since it can be useful occasionally.
Sometimes you want a background image to sit near but not absolutely in the bottom right corner of a container. Since background positioning is calculated from the top left corners, other work around or additional containers were needed to add the padding.
Calc can save this simply by doing the following:
So in the example below, we use calc to position the image all the way to the right then remove 50px and all the way to the bottom then remove 20px to emulate the padding.
100% container, equally distribute multiple containers within the box and account for “tweaks”
A quite common design decision is to have multiple containers within a wrapping container. The inner containers will be a percentage width of the outer container, so are equally spaced. Given this scenario, you would usually just assign
width:33%; to each container and move along. But sometimes, you want extra flexibility for those containers. For example, if you want each box to have a border, you then have to take this in to account as well.
Calc to the rescue again!
This means that the 3 containers will all be equally spaced within their parent container, and account for additional box modifications such as border.
100% fluid width accounting for negative margins
There are times when you want a child element to be 100% width of its parent container which has a negative margin. This is a pain, because the 100% width will not account for the negative margin and remove it from the calculation, thankfully calc can help:
This simply makes the width a bit bigger than 100% to account for the negative value.
Quick and dirty grid system
This is a development only technique and certainly isn’t advisable for a live system, but if you need to put together a quick demo or technical proof of concept for your colleagues, calc can very quickly apply a rudimentary grid system in a few lines:
so we can simply do: