title: How can I prevent div overflow with container width 100%
body: <p>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.</p>
  <p>I currently have the follow CSS:</p>
  <pre><code>header {    
  width: 100%;
  height: 150px;  
  padding: 50px 50px 10px 50px;
  clear: both;
  background: #185f96;}
  
  #logo {
  float: left;
  width: 800px;}
  </code></pre>
  <p><code>#phone { float: left; width: 200px; }</code></p>
  <p>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.</p>
  <p>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.</p>
  <p>(Also sorry for the formatting of the code section, I have trouble getting it to be neatly formatted. Doesn't seem to work properly)</p>