Perfect widths and heights with CSS3 calc()

My biggest frustration with CSS has always been that it’s not dynamic. Especially when it comes to layout, you want to style element in relation to each other. This frustration seems to be coming to an end. CSS3 is now introducing the possibility to calculate any value that can be used in CSS when you would normally enter a length or number. Meet

calc()

With calc() you can calculate using the basic mathematical expressions +, -, * and / . Another great benefit is that you can use percentages as well! So let’s say you want 2 columns, each 50% of your screen with a 10 pixel gap in the middle. In that case you can simply use the following:

#column1 {width:calc(50% - 10px)}

Browser support

Browser support is of course limited to the modern browsers and as it’s still a working draft it is not fully integrated as standard practice at the moment so it will require a browser prefix for now.

  • Good to use in MS Internet Explorer 9 and higher
  • Works in Mozilla Firefox from version 4.0 with the -moz- prefix
  • Works in Google Chrome from version 19.0 with the -webkit- prefix
  • Expected to be supported in Apple Safari 5.2
  • Expected to be supported in Opera 12.0
  • Currently not supported in iOS Safari, Opera Mini, Opera Mobile and Android Browser

For current support status check here.