How can I give this CSS an inner border?

Question

I am trying to give the #page div an inner border that is in line with the grey border around the top part: http://www.designated.net.au/testbed/testpage/

I realise I could just add another div, but that is not the solution I'm looking for as there will be other content within #page. Is this possible?

This follows on from this question: Border-box CSS not working properly

Answer 1

If you don't mind it not working in older browsers you could just use a .box-shadow. This can be done without having to add extra markup. You could also use :before or :after pseudo css classes as well but box-shadow is cleaner IMO.

-webkit-box-shadow(inset 0 0 1px #000);
   -moz-box-shadow(inset 0 0 1px #000);
     -o-box-shadow(inset 0 0 1px #000);
        box-shadow(inset 0 0 1px #000);

Answer 2

You can leverage the relative positioning you are already using to align your images with the border.

Example: http://jsfiddle.net/zbrcb/

Merge these definitions with your existing definitions.

#page {
 border: 10px solid #333;  
}

#spotlight-main-top-left { z-index:3; position:relative; float:left; width:40px; height:40px; left: -10px; top: -10px; }
#spotlight-main-top-top { z-index:2; position:relative; width:100%; height:10px; background-color:#333333; top: -10px; }
#spotlight-main-top-right { z-index:3; position:relative; float:right; width:40px; height:40px; right: -10px; top: -10px; }
#spotlight-main-top-title { z-index:3; position:relative; margin:0 auto; width:200px; height:30px; top: -10px;  }
#spotlight-main-top-title-left { position:relative; float:left; width:30px; height:30px; }
#spotlight-main-top-title-right { position:relative; float:right; width:30px; height:30px; }
#spotlight-main-top-title-middle { position:relative; margin:0 30px 10px; width:140px; height:20px; background-color:#333333; }
#spotlight-main-top-title-text { position:relative; width:140px; height:18px; text-align:center; }

​Works in Chrome, FF, Safari, IE 8/9 (7 could probably be made to work as well; your header is misaligned in IE7 even without this change).

Personally, I would try to reduce the number of elements you are using to create the top of the site, but to be fair it works fine.