I have this layout I am working on. It strongly depends on CSS calc to do the necessary calculations.
width: -webkit-calc(50% - 20px);
width: -moz-calc(50% - 20px);
width: calc(50% - 20px);
Now, I can't get this to work in Safari. Is there something I'm doing wrong?
And also, is there a way I can introduce a fall-back mechanism for browsers that don't support it? Percentage wont do a good job, since I have to subtract the object in the middle, from the two on the side.
Thanks.
The way I solved this problem, is introducing a pure CSS fall-back, that older browsers that don't support CSS calc would only read.
figure.left {
width: 48%;
width: -webkit-calc(50% - 20px);
width: -moz-calc(50% - 20px);
width: calc(50% - 20px);
}
The left and right panels, get a width of 48% if the browser cannot read the calc values.
figure.logo {
min-width: 40px;
width: 4%;
width: -webkit-calc(40px);
width: -moz-calc(40px);
width: calc(40px);
}
And the logo, which sits in-between the two panels, gets a width of 4%. And also a minimum width of 40px. And if the calc values can be read by the browser, they are 40px.