nbar nbar - 2 months ago 25
CSS Question

Alternative to calc()

I have a container with auto-width and some margin left and right:

.inner {
margin-left: 20px;
margin-right: 20px;
width: auto;
}


And in this container different elements. Some elements should be 100% of the page (without the margin) and for that I use calc():

.fullwidthelement {
left: -20px;
width: calc(100% + 40px);
width: -webkit-calc(100% + 40px);
}


But it looks like Safari (5.1.7 on Windows 8) can't handle that. In the Web Inspector I see e yellow exclamation mark and it does not take the rule for the width:
enter image description here

So, is there a work around for this or can I get Safari to work fine with calc somehow?

Answer

First it is important to note that you should always specify the properties with vendor prefixes before the unprefixed properties :

.fullwidthelement {
   left: -20px;
   width: -webkit-calc(100% + 40px);
   width: calc(100% + 40px);
}

Second, if you check canIuse (click on "show all") you will see that safari 5.1 doesn't support the calc() function.