Firefox to implement calc() in CSS3.

June 14th 2010

I’ve just read last week that Firefox would implement calc() in their new version of Firefox. It’s not out in any publicly released version yet but it is coming as they talked about it on their developers blog.

Why should you care?

Ever had an element that needed to have a percentage width with padding? Up until now, because of the way the box model works in Firefox modern browsers, you had to wrap the content in a container to which you’d apply the padding. That’s because when you define padding to an element the value is added to the width, which is the proper way of doing it.

Now the thing is that percentage width don’t mix well with fixed padding values, that where calc() comes into play.

Lets say you have a box with the following css rules:
#box {
padding: 20px;
width: 60%;
}

If that box is in a container 1000 pixels wide, the box would be 640 pixels wide total, that’s not what you want, that’s not 60% wide! You coud use calc() to achieve the desired result:
#box {
width: -moz-calc(60% - 40px);
}

You can even be wild and do basic calculations in there:
#box {
width: -moz-calc(60% - 2 * 20px);
}

Taking it further

What would be even cooler is if you could get the actual padding values as a variable in calc(). Something like:
#box {
width: -moz-calc(60% - (padding-left + padding-right));
}

This way you could even forget about updating your width value when you play with your padding.

Oh well, one day maybe, now let’s just see if other browser vendors implement something of the like. Let’s not forget this is not part of the W3C CSS3 specs.

Is it a feature you were waiting for?

12 Responses to “Firefox to implement calc() in CSS3.”


  1. […] This post was mentioned on Twitter by Stephane Caron, montrealhackers. montrealhackers said: Firefox to implement calc() in CSS3. http://bit.ly/cIlG79 […]

  2. guest says:

    firefox not fast browser, and error of nature. )) value like -moz-* i think not valid by validation w3c. use this values may requires fixes for IE ((

  3. Appreciate your taking this possiblity to mention this, I feel strongly over it and I benefit from studying this subject. If at all possible, while you gain data, please update this site with new information. I have found it extremely useful.

  4. You made some decent points there. I looked on the web for the problem and found most people will associate with with your website.

  5. shak says:

    I was very plefased to find this web-site.I wanted to thanks for your time for this wonderful read!! I definitely enjoying every little bit of it and I have you bookmarked to check out new stuff you blog post.

  6. I happen to be commenting to let you understand of the notable encounter my wife’s princess undergone browsing your web page. She figured out lots of issues, which include how it is like to possess a wonderful teaching mindset to let many more really easily know precisely a variety of extremely tough issues. You really did more than her desires. I appreciate you for coming up with such great, safe, explanatory not to mention unique guidance on the topic to Tanya.

  7. hairloss says:

    “Is it a feature you were waiting for?”

    Yes thanks very much.

  8. interesting says:

    It’s best to participate in a contest for top-of-the-line blogs on the web. I will advocate this site!

  9. When I originally commented I clicked the -Notify me when new comments are added- checkbox and now each time a comment is added I get four emails with the same comment. Is there any way you can remove me from that service? Thanks!…

  10. friend I really appreciate this post. I`ve been looking all over for this! Thank goodness I found it on Google. You`ve made my day! Thank you again

  11. Having issues with css padding in many of my websites… Any suggestions on how to fix it?

  12. Tin says:

    Hi there, just loved your projects, Ii will test them and do a donation later . see ya

Leave a Reply