make <sections> stay in place when shrinking window - css

Question

I have two boxes inside my <header>-tag, which has a total width of 100%. When i align them up they fit perfect, but when i'm shrinking the window the right box jumps down beneath the left one. Here's the code:
header {
width: 100%;
height: 90px;
}
#head {
float: left;
background-image: url('img/header.jpg');
height: 120px;
margin-right: 10px;
width: 65%;
}
#userinfo {
float: left;
height: 100px;
width: 33.2%;
background-color: #202020;
padding: 10px;
position: relative;
}
<header>
<section id="head">
</section>
<section id="userinfo">
test
</section>
</header>
Any quick fixes? Imagining this happens with the rest of my design as I'm moving forward. Thanks in advance.

Answer 1

The problem here is you are using some values for padding and margin on your elements and those by default are added to the actual size of the element, since both elements are 98.2% of the container +20 of the values at some point they don't fit into the 100% and will break.
To solve it you can use box-sizing property which will make the padding and border values be inside the total declared size, and since that doesn't work with margin you will need an extra container to use padding and create the separation:
header {
width: 100%;
height: 90px;
}
#head {
float: left;
box-sizing:border-box;
padding-right: 10px;
width: 65%;
}
#head > div {
background-image: url('http://placehold.it/500');
height: 120px;
}
#userinfo {
box-sizing:border-box;
float: left;
height: 100px;
width: 35%;
background-color: #202020;
padding: 10px;
position: relative;
}
<header>
<section id="head">
<div></div>
</section>
<section id="userinfo">
test
</section>
</header>

Answer 2

Thanks DaniP, that solved it. But what about the content and sidebars part then?:
#container {
margin: 30px auto;
width: 70%;
min-height: 400px;
}
#leftmenu {
float: left;
box-sizing: border-box;
width: 20%;
min-height: 600px;
background-color: #202020;
}
#content {
float: left;
box-sizing: border-box;
width: 60%;
background-color: #202020;
min-height: 600px;
}
#content > div {
background-color: #202020;
min-height: 600px;
}
#rightmenu {
float: left;
box-sizing: border-box;
width: 20%;
min-height: 600px;
background-color: #202020;
}