Getting padding and margins inside parent's width - html

Question

I have an elementary problem with my web that is driving me nuts.
Imagine that I have a container div which I set to be max-width 1024 px. Then I have two more divs inside it that are width:50% each of them. I try to add a padding to the insider divs, but then it overflows above the 1024 max-width pixels of the container div.
My doubt is, if the padding are like inner-margins, they are part of the element, wouldn't it be supposed to be counted inside that 50% width? In other words, I want the element + the padding to be 50%, not just the element.
Just to make things clearer,
This is how it looks now :
... and this is how it should look. :
So, what should I do?

Answer 1

The box model it's like this:
Total width = width + padding + border
If you have got a 1000px of width + 10px of padding it will be a 1020px of total width.
To avoid this you can use this property:
box-sizing: border-box;
More info:
https://developer.mozilla.org/es/docs/Web/CSS/box-sizing

Answer 2

You need to set box-sizing: border-box to your inner div's so the width given includes your padding.
If you intend to use margin, that will not do it.
For that you can use calc(), so if your inner div's will have a 5px margin, it would look like this
width: calc(50% - 10px);
And you can combine them ...
.outer {
width: 500px;
background: red;
padding: 20px 0;
overflow: hidden;
}
.inner {
width: calc(50% - 10px);
height: 100px;
margin: 5px;
padding: 10px;
box-sizing: border-box;
background: blue;
float: left;
}
<div class="outer">
<div class="inner">
</div>
<div class="inner">
</div>
</div>

Answer 3

You can use manual width something like ::
<div style="width:1024px">
<div style="width:502px;padding:5px"></div>
<div style="width:502px;padding:5px"></div>
</div>

Answer 4

Yes the paddings are like inner-margins, they are part of the element's actual size.
You should calculate
total element width = width + left padding + right padding + left border + right border + left margin + right margin
e.g.
The two <div> elements above end up with different sizes in the result (because div2 has a padding specified).
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
<div class="div1">This div is smaller (width is 300px and height is 100px).</div>
<br>
<div class="div2">This div is bigger (width is also 300px and height is 100px).</div>
For your problem you will have to use box-sizing: border-box;
The CSS3 box-sizing property allows us to include the padding and border in an element's total width and height.
If you set box-sizing: border-box; on an element padding and border are included in the width and height:
See below example
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
<div class="div1">Both divs are the same size now!</div>
<br>
<div class="div2">Hooray!</div>