Search code examples
csssafaricss-calc

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?

Solution

  • 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.