css how to make max-width fixed when adding padding

Question

I just wondering is there any way that could make max-width become fixed when padding left and right is being added?

Here my css:

#editorBody {
  overflow: auto;
  margin: auto;
  padding: 15px 40px 10px 40px;
  max-width: 816px; 
}

I would like the width is 816px, but actually it is 736 (816-50).

Answer 1

You are going to want to add the css rule box-sizing: border-box;

According to Caniuse there may be a need for prefixing...

CSS

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

Check out this page for a comprehensive look at box-sizing