How can I prevent div overflow with container width 100% - css

Question

I am trying to find a neat way to get my header to have a width of 100% (so I can use a background colour that spreads across the whole page), but also within it I have two images, that I'd like to stay inline and not overflow on each other or push each other down.
I currently have the follow CSS:
header {
width: 100%;
height: 150px;
padding: 50px 50px 10px 50px;
clear: both;
background: #185f96;}
#logo {
float: left;
width: 800px;}
#phone { float: left; width: 200px; }
Logo and phone are inside the header. If you look at it in action (removed) you can see if you size it down to a certain point, the phone info gets pushed under the banner. I can set it to a static width, but then this is an issue with different web sizes.
I created an extra div inside the header in which I just put the logo, and left the phone on the outside. This gives me the results I want, but I want wondering if there was a neater way of achieving this without the extra div.
(Also sorry for the formatting of the code section, I have trouble getting it to be neatly formatted. Doesn't seem to work properly)

Answer 1

Reduce your page with and use % unit in padding too as.
header {
width: 84%;
height: 150px;
padding: 5% 5% 1% 5%;
clear: both;
background: #185f96;}
#logo {
float: left;
width: 800px;}

Answer 2

Set width is percentage and then add white-space:nowrap; to header to prevent things from to a new line
header {
width: 100%;
height: 150px;
padding: 50px 50px 10px 50px;
clear: both;
background: #185f96;
white-space:nowrap; /*added*/
}
#logo {
float: left;
display:inline-block; /* or width in percentage */
}
#phone {
float: left;
min-width: 20%; /* ammended */
}