Alternative to calc()

Question

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?

do do realise that 100% + 40px will be wider than the screen, right? — jbutler483, Mar 04 '15 at 13:02
@jbutler483 no. 100% is 100% of the parent element. so if the parent element got 20px margin on each side. 100% + 40px will be exactly as wide as the screen. — nbar, Mar 04 '15 at 13:13
Safari for Windows is dead, cremated and buried, so if that's the only issue, I wouldn't worry about it. — ralph.m, Mar 04 '15 at 13:21
@ralph.m It looks like I don't have to support safari for windows. Pretty lucky me, I don't have to edit all elements that use that. — nbar, Mar 04 '15 at 15:44

score 3 · Accepted Answer · edited May 23 '17 at 11:51

3

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.

edited May 23 '17 at 11:51

Community

1
1

answered Mar 04 '15 at 13:15

web-tiki

99,765
32
217
249

Thank you for your first point. I did not know that. Why that? - To `can I use` I use this but did not realise that safari on windows is that old.. – nbar Mar 04 '15 at 13:19

score 2 · Answer 2 · answered Mar 04 '15 at 13:19

2

Would negative margins work for you?

#container
{
    border: 1px solid;
    width: 400px;
}

.inner
{
    background: red;
    height: 200px;
    margin-left: 20px;
    margin-right: 20px;
    width: auto;
}

.fullwidthelement
{
    background: green;
    height: 100px;
    margin-left: -20px;
    margin-right: -20px;
}

<div id="container">
    <div class="inner">
        <p>Blabla</p>
        <div class="fullwidthelement"></div>
    </div>
</div>

answered Mar 04 '15 at 13:19

maryisdead

1,792
2
19
30

thanks for this, nice idea. I would have to add a extra container to all the elements that use that, cause some of them have allready a margin – nbar Mar 04 '15 at 15:42

score 1 · Answer 3 · answered Mar 04 '15 at 13:15

1

use padding for that

.outer-div {
    width: 200px;
    height: 200px;
    background: #000;
    margin: 0 auto;
    position: relative;
}
.inner-div {
    width: 100%;
    height: 150px;
    padding-right: 100px; /*extra width you want to add*/
    background: #f00;
    position: absolute;
    top: 20px;
}

<div class="outer-div">
    <div class="inner-div"></div>
</div>

Jsfiddle http://jsfiddle.net/0xdscqLo/2/

answered Mar 04 '15 at 13:15

naman kalkhuria

404
4
8

It's like the margin idea. Thanks. Also here I would have to use a extra container cause some elements allready use a padding. – nbar Mar 04 '15 at 15:43

Alternative to calc()

3 Answers3