Hello,

I am hoping this is easy for you master css people but I am lost.

I am basically doing some tests for a prospective job and one of the tests was to create a mask with a 25px border all around. This needs to fit the screen size exactly with no scroll bars.

The content inside will then need to scroll. So the mask stays in tact and the pages scroll inside.

Hard!

Here is what I have so far:-

HTML Code:
<div id="mask"></div>
<div class="main-container"> 
   <!-- content goes in here -->        
</div>
My CSS:

Code:
#mask
{
	position:fixed;
	width:100%;
	height:100%;
	border:25px solid #fff;
	-moz-box-sizing: border-box; 
	-webkit-box-sizing:box-sizing; 
	box-sizing: border-box;	
	z-index:1000;
}
.main-container
{
	position:absolute;
	width:100%;
	height:1000px;
	z-index:900;	
	margin:1.5625em 0 0 1.5625em;
	
	background:#f00;
	
	border:25px solid #000;
	-moz-box-sizing: border-box; 
	-webkit-box-sizing:box-sizing; 
	box-sizing: border-box;	
}
I put the black border on the main-container to test it fits inside the white border created by the mask. It doesn't. How can I get it to do this? I can't work out how I can create a % as the mask auto stretches to the screen size.

Any ideas?