Uses for CSS3 calc() function

This is going to be incorporated into Firefox 4 and there is a semi-implementation on IE9. The webkit programmers have been working on calc() since 2007 (!) so I guess it will be available in Chrome and Safari sometime in 2011.

I was thinking that a good use for it would be in fluid design but can anybody else give any practical examples where it would come in handy?

http://dev.w3.org/csswg/css3-values/#the-calc-min-and-max-functions

Thinking about it more it could be useful on the layout of forms. I’ll have to download Firefox4 and play around with it.

Is there a Firefox 4 beta for developers?

And I did not know that work was still being put into the calc() function. Thanks for reminding me about it!

-Team 1504

I was thinking that a good use for it would be in fluid design but can anybody else give any practical examples where it would come in handy?

Yes it will be useful for fluid layouts where you have say a 25% width but also have padding and borders in px that you want to account for. Although you can do that now by using the box-sizing property instead.

It could be useful for sticky footers where you want a min-height of 100% minus the height of the footer.

It could be useful for creating fluid width floats in a column layout. e.g. the right column is 200px wide and floated right which means you could then float a left column at 100%-200px width.

It’ll be a long time before we can use it for real though unfortunately as it will be a feature that will break many browsers if not present.

Here’s the latest Firefox spec:

You’re right about CSS3 box-sizing doing the job just as well

I’ve been trying to think of a non-layout use for calc() as it can be used for any property such as fonts and line-heights…