title: Issue with 2 Divs not aligning correct
body: <p>I have 2 divs nested within a parent div.</p>
  
  <p>Im having a problem setting the Schedule Div and PhoneNumber Div correctly.  I've tried adding .clear and float tags.</p>
  
  <p><a href="http://www.virtualpetstore.com" rel="nofollow noreferrer">http://www.virtualpetstore.com</a></p>
  
  <p><img src="https://i.stack.imgur.com/zfOIh.jpg" alt="enter image description here"></p>
  
  <p>The 2 Divs <em>should</em> appear as is in the Illustration, but when I view this with a larger monitor, the 2 Divs are way off to the right</p>
  
  <p>I've tried to change the floats to right, then change the position to relative which completely breaks the page. </p>
  
  <pre><code>*{ margin:0; padding:0 }
  body {
      background-color: #9EB0C8;
      font-family: Arial,Helvetica,sans-serif;
      font-size: 62.5%;
  }
  #top-wrap {
      height: 133px;
      margin: 0 auto;
      width: 882px;
      position: relative;
      z-index:100;
      background-color: Yellow;
  }
  #head-logo {
      height: 133px;
      width: 214px;
      float:left;
      position:relative;
      /*margin: 0px 0 0 58px;*/
      background: url("/images/Home/Logo7.png") no-repeat scroll 0 0 transparent;
      background-position:bottom;
      background-color: Green;
  }
  #head-title {
      height: 55px;
      width: 385px;
      float:left;
      position:relative;
      margin: 9px 0 0 18px;
      background: url("/images/Home/LogoTitle1.png") no-repeat scroll 0 0 transparent;
      background-color:Red;
  }  
  #contact-button {
      height: 28px;
      width: 165px;
      float:left;
      position:absolute;
      margin: 7px 0 0 715px;
      background-color:orange;
  }
  #contact-phone {
      height: 20px;
      width: 134px;
      margin: 28px 0 0 745px;
      float:left;
      position:absolute;
      color:#FFFFFF;
      font-family: Arial,Impact,Impact5,Charcoal6,sans-serif;
      font-size: 2.1em;
      text-align: right;
      background-color:Blue;
  }    
  a.contact {
      background-image: url("/images/Home/RapidButtonSprite4.png"); 
      background-position:left bottom; /* 0px -27px; */ 
      display: block;
      font-size: 11px;
      text-align: center;
      width: 165px;
      height: 27px;   
  }
  a.contact:hover {
      background-position:left top; /*0px 0px;*/
  } 
  #navigation-primary {
      float:left;
      position:relative;
      margin: 18px 0 0 4px;
  }
  </code></pre>
  
  <p>Here is the Relevent HTML:</p>
  
  <pre><code>&lt;div id="top-wrap"&gt;
      &lt;div id="head-logo"&gt;
          &lt;a href="/"&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div id="head-title"&gt;
      &lt;/div&gt;
      &lt;div id="contact-button"&gt;
          &lt;div id='contact-form'&gt;
              &lt;a class="contact" href="#"&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;br style="clear: right" /&gt;
      &lt;div id="contact-phone"&gt;
          703-425-6000
      &lt;/div&gt;
      &lt;div id="navigation-primary"&gt;
      ....
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>