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/

It is important to note that vertical margins and paddings are computed based on the **width** of the element, contrary to common sense. http://stackoverflow.com/questions/11003911/why-are-margin-padding-percentages-in-css-always-calculated-against-width. If you intend to fill up the entire viewport anyway, try using the `vh` and `vw` units instead. — Terry, Apr 05 '14 at 13:12

Roko C. Buljan · Answer 1 · 2014-04-05T12:32:25.720

0

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.

edited Apr 05 '14 at 12:32

answered Apr 05 '14 at 12:25

Roko C. Buljan

196,159
39
305
313

Rob Sedgwick · Accepted Answer · 2014-04-05T12:37:52.203

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

score 0 · Answer 3 · answered Apr 05 '14 at 12:31

0

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>

answered Apr 05 '14 at 12:31

Mudassir

1,136
1
11
29

score 0 · Answer 4 · answered Apr 05 '14 at 13:09

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

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

4 Answers4