Css how to make maximum width fixed when adding padding

Question

I'm just wondering if there is a way that could make max-width fixed when adding left and right is added?

Here is my css:

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

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

Answer 1

You need to add the css box-sizing: border-box; rule box-sizing: border-box;

According to Caniuse , a prefix may be required ...

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+ */ 

Browse this page for a comprehensive view of box-sizing