Question

I’m trying to make fixed 100% but with a little frame around.
I just cant get it right, the frame would appear EITHER top/ bottom, or left/ right, but not from both sides…

Here’s what I’ve got so far:

div.all_reviews{
    background: url(../design/trans-gr.png);
    position:fixed;
    width:100%;
    height:100%;
    z-index:12500;
    padding:15px;
}
div.wrap1{
    width:100%;
    height:100%;
    background-color:#00AEEF;
}   

EDIT:1 ALLRIGHT THEN, This is what I’ve gotten to so far:

http://jsfiddle.net/Hm7Mw/

div.all_reviews{
    background: url(../design/trans-gr.png);
    position:fixed;
    width:100%;
    height:100%;
    z-index:12500;
    overflow:auto;
}
div.wrap1{
    display: block;
    position:absolute;
    height:auto;
    width:100%;
    min-width:962px;
    bottom:6px;
    top:6px;
    left:0px;
    right:0px;
}   
div.wrap2{
    margin:0px auto;
    max-width:960px;
    height:100%;
    position:relative;
    overflow:visible;
}   
div.wrap3{
    overflow:hidden;
    height:auto;
    min-height:100%;
    width:100%;
    position:absolute;
    background-color: #FFF;
}   

Again, it works perfectly with scrolling – ie,. I’ve made it scroll the whole thing, rather than what’s inside the wraps.

However if I scroll it down, the padding at the bottom vanishes for some reason.
if I put overflow auto to the inner containers instead, then it would sort of ‘fix’ it, but they would have very ugly scrollbars in the middle of the screen- which I don’t want.

HTML:

<div class="all_reviews">
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">

       (BLA)      

</div>
</div>
</div>
</div>
</div>

Answer 1

 <div class="all_reviews">

    <div class="wrap1">
        <div class="wrap2">
            <div class="wrap3">
                    /8Content/8
        </div>
    </div>
    </div>
</div>

    all_reviews{
    background: url(../design/trans-gr.png);
    position:fixed;
    width:100%;
    height:100%;
    z-index:12500;
    display:none;
}
div.wrap1{
    display: block;
    position:absolute;
    height:auto;
    width:100%;
    bottom:25px;
    top:5px;
    left:-10px;
    right:0px;
}   
div.wrap2{
    margin:0px auto;
    width:100%;
    max-width:940px;
    min-height:100%;
    position:relative;
}   
div.wrap3{
    overflow:auto;
    height:100%;
    width:100%;
    position:absolute;
    background-color: #FFF;
    border:5px solid #CCC;

    padding:5px;
}   

Note to undo display : none with a script, and make the body fixed with overflow:hidden, so it doesn’t scroll along the way on the background.