How to keep outer div not be pushed out by inside div's padding/margin?

Question

Here's the jsfiddle example

Here's the html:

<div class="header">header</div>
    <div class="wrapper">
        <div class="left"><div class="content"></div></div>
        <div class="right">right</div>
    </div>

Here's the css:

.left{
position:absolute;
width:30%;
background:red;
left:0;
height:100%;
display:block;
padding:5px;
}
 .right{
overflow:hidden;
background:green;
position:absolute;
right:0;
width:70%;
height:100%;
}

html, body{
min-height:100%;
height:100%;
padding:0px;
margin:0px;
position:relative;
}

body {position:relative;}

.wrapper {
position:relative;
height:100%;
}

.header{
width:100%;
height:100px;
background:yellow;
display:none;
}

.left .content {
background:blue;
height:inherit;
width:100%;
}

You can see the red div being pushed out by the blue div. How can I prevent that? All the width and height are based on %. The only way I know is to give the red div a fixed width. I s there any other way that it can be done with %?

Answer 1

You want to use box-sizing, see this updated example: http://jsfiddle.net/Lca5c/1/

Your CSS will look like:

.left{
    position:absolute;
    width:30%;
    background:red;
    left:0;
    height:100%;
    display:block;
    padding:5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

The reason it's been pushed out is due to the padding you've added to to div. Make sure you check out the browser compatibility (here) to see if it matches your requirements.