Box-Sizing doesn't seem to honor padding the way I expect

Asked 8 years ago
Viewed 185 times

Can someone tell me why the box-sizing doesn't seem to honor the padding in the div given the following fiddle example

// The code is too long for this but can be viewed using browser debugging tools
// and here is a picture that says it all. 

Box-Sizing doesn't seem to honor padding the way I expect

The left column is fixed width: 190px;

The right column is width:100% with a margin-left: 190px

The green div is a nested div without a width and height:20px;

  div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

Shouldn't the padding push the green line in as it is on the left side?

asked 8 years ago

Correct Answer

The problem in this instance is with the #wizard-body div, which has a left margin but also a width of 100%, which means it's way to wide for its container. The float also messes things up. Remove these and it will work as expected:

#wizard-body {
    float: left;
    width: 100%;

The green div is behaving as expected, but is following the container off screen.

answered 8 years ago

Other Answer

box-sizing:border-box does not remove the padding. It just dont take it into account when calculating width of div.

div {width:400px; padding:10px;} will give a div with width of 420px as width also includes padding.


div {width:400px; padding:10px; box-sizing:border-box;} will give a div with width of 400px since it does not includes padding.

But in both cases padding remains there.

answered 8 years ago