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

css, fluid, fluid-layout

Solution

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.

Problem

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 %?

Original source