css responsive box width 90% * 95% with 5% 5% 0 5% margin

Question

What I'm trying to achieve is this:

It seems like imposible. Tried a lot of possibilities. None of them worked. This is the one I think should work.

<div id="wrap">
    <div id="content">hello</div>
</div>

html,body{
    height:100%;
}

    #wrap{
        background-color:red;
        width:100%;
        height:100%;
    }

    #content{
        background-color:cyan;
        width:90%;
        height:95%;
        margin: 5% 5% 0 5%;
    }

Live: http://jsfiddle.net/vjb45/

Answer 1

One way ( simple and small ) is to use the css prop - box-sizing:border-box on the container: eg http://jsfiddle.net/6EfeC/

This css will allow you to use full values of margin/padding and width combined into one unit.

html,body{
    height:100%;
}

#wrap{
    background-color:red;
    width:100%;
    height:100%;
    box-sizing:border-box;
        /* for current ffox */
        -moz-box-sizing:border-box;
    padding:2.5% 5%;
}

#content{
    background-color:cyan;
    height:100%;
}

---

Check - availablity and for vender prefixes. eg

-moz-box-sizing:border-box

Answer 2

Write the following code into your text editor and it will work!

<style>
body{margin:0px;}
.contain {
background-color:black;
margin-top:5%;
margin-left:5%;
margin-right:5%;
min-height:95%;
}
</style>

<div class="contain">Content here
</div>

Answer 3

DEMO

Add this

   position:absolute;
   left:0;
   right:0;
   bottom:0;

to #content

Also don't forget to add margin:0; to body cause the browser adds some by default.

Answer 4

you can do this by using flat property for content i have try this and it works and changing margin value and it is just apply this to content

#content{
    background-color:cyan;
    width:90%;
    height:95%;
    margin: 5% 5% 0% 5%;
    float:right;
}

hope this is what you where expecting

and here is fiddel link