Simulate the "inner border" in CSS?

Question

I have the following 4 divs with CSS below. The problem is that the border on the red span drags the rest. How can i avoid this? I tried to add fields to spanRed, even negative fields, none of which worked.

http://jsfiddle.net/eh9rM/

Bonus points . This does not work in IE (testing 8.9) at all ... only a blue div appears. :)

<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:

• Add div { box-sizing: border-box } . This switches the elements to the “traditional” model, where borders and spacers are included in the width (supported by IE8 +)
• Use Flexible Box model (IE10 +)
• Add Borders as Pseudo Elements (IE8 +)

Using pseudo-elements (remove border with #spanRed ):

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

Remember that using position:fixed as the basis for the layout is very fragile.

to change . If you need IE7 support, add an additional element via JS:

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

Then specify it in CSS. Keep in mind that you need to repeat the whole style, you cannot use both selectors together, otherwise IE7 ignores the rule.

Or, since these are all "useless" elements, just add it to your HTML:

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

Here is your code using this: http://jsfiddle.net/eh9rM/2/