Question

I have the following 4 divs with the CSS below. The problem is, the border on the red span draws over the others. How can I avoid this? I tried adding margins to spanRed, even negative margins, neither of which worked.

http://jsfiddle.net/eh9rM/

Bonus points This doesn’t work in IE (8,9 tested) at all… only the blue div shows up. 🙂

<div id="spanBlue"></div>
<div id="spanGreen"></div>
<div id="spanOrange"></div>
<div id="spanRed"></div>


#spanBlue      {position: fixed;
                top: 0px; left: 0px;
                height: 100%;
                width: 10%;
                background-color: #4D9DB8;
                border-right: 10px solid #045B6F;
                z-index: 1;}    

#spanGreen     {position: fixed;
                top: 0px; left: 0px;
                height: 10%;
                width: 100%;
                background-color: #A4AC79;
                border-bottom: 10px solid #34655F;
                z-index: 1;}    

#spanOrange    {position: fixed;
                top: 0px; left: 0px;
                height: 10%;
                width: 10%;
                background-color: #FA9D26;
                border-right: 10px solid #045B6F;
                z-index: 2;}         

#spanRed       {position: fixed;
                bottom: 0px; right: 0px;
                height: 90%;
                width: 90%;
                background-color: WHITE;
                margin-top: 20px;
                margin-left: 20px;
                border-top: 10px solid #B52024;
                border-left: 10px solid #B52024;
                z-index: 3;}     

Answer 1

You have two options:

1. Add div { box-sizing: border-box }. This switches the elements to the ‘traditional’ model, where borders and paddings are included in the width (supported from IE8+)
2. Use the Flexible Box model (IE10+)
3. Add the borders as pseudo-elements (IE8+)

Using pseudo-elements (remove the border from #spanRed):

#spanRed:after {
    content:' ';
    display:block;
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0; 
    border:4px solid red;
}

Bear in mind that using position:fixed as the basis for a layout is very fragile.

edit: if you need IE7 support, add the extra element via JS:

$('#spanRed').append('<span class="after" />')

Then reference it in the CSS. Be aware that you have to repeat the whole style, you can’t use both selectors together otherwise IE7 ignores the rule.

Or, since these are all “useless” elements anyway, just add it to the HTML:

<div id="spanRed">
   <span class="inner"></span>
</div>

Here’s your code using that: http://jsfiddle.net/eh9rM/2/