CSS3 calc(), min() and max() functions

20 October 2011

One of the most awesome new features of the CSS3 spec is the calc() function. Currently only supported by Firefox and IE9 but on its way to become part of the spec.

The CSS box model has been a pain in the ass for many aspiring frontend developers and hopefully this new function makes this a lot easier.

What does it do?
Calc() enables you do do calculations (what's in a name..) as values for properties. Whereas you until recently only were able to use values like 5px or 50% as value for the width of a DIV, for example, you can now let that width be calculated by the browser.

Why do I need this, isn't the box model good enough?
Since websites get more and more responsive and need to adapt to different devices, the need for more fexibility in CSS has grown. Something that wasn't used a lot in the "early days" is this simple example:

<div class="left">left column</div>
<div class="right">right column</div>

You want two containers floating next to each other with a gap of 50 pixels between them. But the columns need to have a variable width... Setting both columns to 50% and a right-margin of 50px to the left column is going to break your layout because the sum of all widths is more than 100%...

.left, .right {
    float: left;
    width: 50%;
}
.left {
    margin-right: 50px;
}
This will break your layout!

To get this to work in the traditional box model, you'll need to create some nasty hacks or set the gap between the columns to a percentage that looks like the 50px gap in the most viewed resolution but that can look really ridiculous on large monitors. That gap looks like 50px on my mobile, but looks like a 500px gap on my super big HD screen. That's not acceptable either...

Calc() comes to the rescue!
But what if you could set the widths of the two columns to 50% minus 25px (half of the gap) on both columns? Thát's what calc() enables you to do! That looks like this:

.left, .right {
    float: left;
    width: calc(50% - 25px);
}
.left {
    margin-right: 50px;
}

No hacks needed!

And those darn borders? Also easy!

.left, .right {
    float: left;
    border: 10px solid red;
    width: calc(50% - 25px - 20px); /* subtract 20px for a 10px border on both sides */
}
.left {
    margin-right: 50px;
}

Awesome! When can I use it?!
Well, since it is now only supported by Firefox (since version 4) and IE9 and newer you can't really use is, but once the other browsers implement this, it makes your work as frontender much easier!

Be sure to check caniuse.com or the CSS3 spec before using calc() to be sure it's supported by the browsers your crafting for.

Moar awesomeness!
The CSS3 spec also elaborates on the min() and max() functions. As you could have guessed these are mathematical functions too. These are probably even cooler than calc(). What if you'd like to set a fontsize to a relative size like 80%, but you want to be sure the font never gets smaller than 12 pixels? Easypeasy!

blockquote {
    font-size: min(80%, 12px);
}

Unfortunatly this awesome feature isn't supported by any browsers yet, but I hope this will change soon!

Browser support for calc


You must have JavaScript enabled to use this form!

Leave a comment!

  1. Your mail is safe with me. It's only only used to display your Gravatar image!

3 comments

  1. Gravatar

    F L

    04 March 2015

    Min() and max() have been dropped from the spec, they won't work.

  2. Gravatar

    Leo

    08 October 2014

    Very interesting article, thanks. In the last piece of code I think it should be:

    font-size: max(80%, 12px);

    instead of:

    font-size: min(80%, 12px);

    Cheers.

  3. Gravatar

    Eddy

    30 July 2014

    Your min() should be a max().. otherwise you could get values smaller than 12px.