5 same size elements, on the same line, with margin - html

Question

I have an issue and I can't find the right keywords on Google.. But it seems prettry "classic".
I have a webpage, let's say with a max-width of 1500px;
I want to add a line, with 5 "boxes" (div) of the same size each, separated with a margin.
So I set a width of 20%, and a margin-right of 10px. My issue is that my last div always goes down to the next line, because of the margin. (Because with the margin, the width of my line is higher than the max-width of the page).
If I remove the margin, all the boxes are correctly on the same line.
What should I do to make it work ? (Except using outerWidth of jQuery, it is my next step if I can't do it easily with css)
Here is my code the code I have now :
<div id="page">
<div id="numbers">
<div class="numberwrap">
<div class="number">
Number
</div></div>
<div class="numberwrap">
<div class="number">
Number
</div></div>
<div class="numberwrap">
<div class="number">
Number
</div></div>
<div class="numberwrap">
<div class="number">
Number
</div></div>
<div class="numberwrap">
<div class="number">
Number
</div></div>
</div>
</div>
#page
{
max-size: 500px;
background-color:grey;
}
.number
{
background-color:white;
}
.numberwrap
{
float:left;
width:20%;
padding-right:10px;
}
I also made a fiddle, to test : http://jsfiddle.net/jKMp5/
Thank you !
Solution : I just have to set the padding property on the .number, not the wrapper !
Or use box-sizing !
Thanks to everybody

Answer 1

Div's with a width percentage adds margins and paddings width on to that.
Meaning a div with width 50% amd margin-right: 20px; will be 50% + 20px.
You can do the following.
<div style="width: 20%;">
<div style="margin-right: 20px;"></div>
</div>
That will sort it out.
or just the following
.number
{
background-color:white;
padding-right:10px;
}
.numberwrap
{
float:left;
width:20%;
}

Answer 2

The problem is (as you already said) that the margin is affecting to each div making it bigger than that 20%, so one solution could be to tell to that div that the margin is included in the total width with the property box-sizing
So add:
.numberwrap {
box-sizing: border-box;
}
See jsFiddle example: http://jsfiddle.net/jKMp5/2/

Answer 3

In the default box modal,
The padding area extends the content area with the empty area between the content and the eventual borders surrounding it.
You can change this behavior using box-sizing property by applying box-sizing:border-box
border-box:
The width and height properties include the padding and border, but not the margin.
.numberwrap
{
box-sizing:border-box;
/*other styles*/
}
Demo

Answer 4

You can use disaply:table and display:table-cell:
css
#page
{
max-size: 500px;
background-color:grey;
}
.number
{
background-color:white;
}
.numberwrap
{
float:left;
width:20%;
padding-right:10px;
display:table-cell;
/*border: 1px solid black;*/
}
#numbers{
display:table;
}
fiddle