www.webdeveloper.com
Results 1 to 4 of 4

Thread: Really difficult css question?!

  1. #1
    Join Date
    Jul 2010
    Posts
    50

    Really difficult css question?!

    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?

  2. #2
    Join Date
    Dec 2011
    Posts
    74
    This may be of interest to you - it doesn't hand you the answer but it may point you in the right direction.

    http://www.alistapart.com/articles/holygrail/

  3. #3
    Join Date
    Mar 2012
    Posts
    1,834
    What is wrong with:

    body {
    background-color: #000000;
    }
    #container {
    height:100&#37;;
    width: 100%;
    margin: 25px;
    overflow: auto;
    background-color: #FFFFFF;
    }

  4. #4
    Join Date
    Mar 2012
    Posts
    1,834
    I withdraw my solution in #3 above, as it does not work. I've found a solution, but will just give a clue: It's to do with the HTML elements: HTML and BODY and the properties you can set for them in CSS. Many people do not realise that the HTML tag can have CSS properties set.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles