The ‘box-sizing‘ property should by now be familiar to every front-end developer by now. It forces the browser to include one or more of the padding, border & margin in the specified height and/or width. For example we’ve set our height to 100px, padding to 10px & a border of 1 pixel below.
Usually, the css box-model would create a box covering a total height of 122px (100px height, 10px by 2 padding for the top & bottom & 1px x 2 for the border top & bottom). With ‘box-sizing’ set to ‘border-box’ the total height is set to 100px, therefore the area available for content is 78px;
The ‘calc()‘ unit value calculator allows us to calculate values by mixing multiple unit types, in our case its percentages & pixels but you can use any css values. These can be added, subtracted, multiplied or divided. The declaration would look something like this:
width:calc(100% - 20px)
Lets say the element in question is in a container 1000px wide, the element would be 980px wide.
‘box-sizing‘ can be used in this way on Chrome, Firefox (with vendor prefix), Safari, Opera & IE8+
‘calc()‘ can be used with Chrome, Firefox, Safari (with vendor prefix), Opera & IE9+
The demo below demonstrates the technique with 4, 3, 2 & 1 columns with 2 break points. On desktop it responds at 480px & on iPad it can be demo-ed successfully by rotating the device from landscape to portrait or vice versa.