child with 100% width in padding applied parent

css, html

Solution

this happens because the borders of the inner `div` are not part of the definition of the `width` itself, so your inner div is actually `100% + 2px` wide.

you should specify `box-sizing: border-box;` for the inner div, so its width will include borders

See the MDN documentation for further information (and browser support) about this property.

Problem

I have a `div` with this css specifications: ``` width:200px; padding:5px border:1px solid ``` and another `div` as it's child with this css: ``` width:100% border:1px solid ``` and these divs has rendered in FF and IE like this: But it seems the right padding is less than left one! can any one tell me why this behavior causes? Thanks

Original source