title: Side-by-side divs overlapping as window width shrinks
body: <p><strong>ANSWERED: I can't answer my own question for 8 hours.  The answer is below.</strong></p>
  
  <p>I have figured out how to fix the issue I was having.  Here is the working JSFiddle: <a href="http://jsfiddle.net/8fRTH/7/" rel="nofollow">http://jsfiddle.net/8fRTH/7/</a></p>
  
  <p>First, instead of displaying the images as background images of each div, I placed them in img tags in each respective div.  I then applied max-width: 100%; to each image.</p>
  
  <pre><code> /*----------------------------------------------------------
   *  Logo &amp; Carousel strip
   *----------------------------------------------------------*/
  #logo-bar {
      max-height: 300px;
      overflow: hidden;
  }
  
  #logo-bar div {
      margin: 0;
  }
  
  #logo-bar img {
      max-width: 100%;
  }
  </code></pre>
  
  <p>I added an overflow: hidden; to the main container to compensate for the fact that the #carousel image is larger than the height I would like by default for the #logo-bar container.</p>
  
  <p>After that, I created a bit of Javascript to fire when the browser resizes to resize the #logo-bar container height to the height of the image in #logo-box.</p>
  
  <pre><code>$(window).resize(function(){     
      $('#logo-bar').height( $('#logo-box img').height() );
  });
  </code></pre>
  
  <p>This makes the container height shrink at the same rate the browser naturally shrinks the logo by resizing the browser window, which in turn only displays the right amount of the image in the #carousel-box div.</p>
  
  <p>Thanks to everyone who took time to look at this and offer help!</p>
  
  <p><strong>ORIGINAL POST</strong></p>
  
  <p>Thanks in advance for taking the time to read this.  </p>
  
  <p>I have two divs that are side-by-side: #logo and #carousel.  #logo has a width of 33%, #carousel has a width of 66%.  When the browser is maximized, they are situated side-by-side, as intended.  However, as the browser window shrinks, the #carousel div begins to shift left and overlap the #logo div.  </p>
  
  <p>My expected result would be that since each div is a % of the total width, that as the browser window shrinks, each div would adjust accordingly.  This is not what is happening.  Additionally, if I leave the browser at a smaller size and reload the page, the right div still overlaps the left div.  I am not sure why they are having this behavior, as they should each be a set percentage of the total window size.</p>
  
  <p>Any input or suggestions would be greatly appreciated.  Thank you for your time.</p>
  
  <p><strong>Edit #2:</strong> 
  <a href="http://jsfiddle.net/8fRTH/3/" rel="nofollow">http://jsfiddle.net/8fRTH/3/</a></p>
  
  <p>I edited the JSFiddle to include images to demonstrate the problem.</p>
  
  <p><strong>Edit:</strong> Relevant code below:</p>
  
  <pre><code>&lt;!--============================================
      Logo/Carousel Bar
  ================================================--&gt;
      &lt;div class="section group" id="logo-bar"&gt;
          &lt;div class="col span_1_of_3" id="logo-box"&gt;&amp;nbsp;&lt;/div&gt;
          &lt;div class="col span_2_of_3" id="carousel-box"&gt;&amp;nbsp;&lt;/div&gt;
      &lt;/div&gt;
  
  /*----------------------------------------------------------
   *  Logo &amp; Carousel strip
   *----------------------------------------------------------*/
  #logo-bar {
      height: 300px;
  }
  
  #logo-bar div {
      margin: 0;
  }
  
  #logo-box {
      height: inherit;
      background-image: url("../img/raffa-logo.png");
      background-size: cover;
  }
  
  #carousel-box {
      height: inherit;
      background-image: url("../img/carousel-slide-1.jpg");
      background-size: cover;
  }
  
  /*  SECTIONS  ============================================================================= */
  
  .section {
      clear: both;
      padding: 0px;
      margin: 0px;
  }
  
  /*  GROUPING  ============================================================================= */
  
  
  .group:before,
  .group:after {
      content:"";
      display:table;
  }
  .group:after {
      clear:both;
  }
  .group {
      zoom:1; /* For IE 6/7 (trigger hasLayout) */
  }
  
  /*  GRID COLUMN SETUP   ==================================================================== */
  
  .col {
      display: block;
      float:left;
      margin: 1% 0 1% 1.6%;
  }
  
  .col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */
  
  
  /*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */
  
  @media only screen and (max-width: 480px) {
      .col { 
          margin: 1% 0 1% 0%;
      }
  }
  
  /*  GRID OF THREE   ============================================================================= */
  
  
  .span_3_of_3 {
      width: 100%; 
  }
  
  .span_2_of_3 {
      width: 66.13%; 
  }
  
  .span_1_of_3 {
      width: 32.26%; 
  }
  
  
  /*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
  
  @media only screen and (max-width: 480px) {
      .span_3_of_3 {
          width: 100%; 
      }
      .span_2_of_3 {
          width: 100%; 
      }
      .span_1_of_3 {
          width: 100%;
      }
  }
  </code></pre>