title: Responsive divs covering other content on resize
body: <p>I have three responsive divs inside a div.  All is well until I resize, and the divs will sit on top of the content just below it.</p>
  
  <p>What appears to be happening is the content below my responsive divs are not moving down to compensate at all when the page is resized.  I've tried inline block, playing with float and clear, overflow, nothing seems to change it.  </p>
  
  <p>JSFiddle  <a href="https://jsfiddle.net/Qozmiq/mgh0yL78/" rel="nofollow">https://jsfiddle.net/Qozmiq/mgh0yL78/</a></p>
  
  <p>This has to be something simple I'm missing. </p>
  
  <p>CSS   </p>
  
  <pre><code>#pagewrapq {
  padding: 5px;
  width: 98%;
  height: 300px;
  margin: 20px auto;
  }
  headerq {
  height: 100px;
  padding: 0 15px;
  }
  #contentq {
  width: 345px;
  display: inline-block;
  padding: 5px 15px;
  }
  
  #middleq {
  width: 345px; /* Account for margins + border values */
  display: inline-block;
  padding: 5px 15px;
  margin: 0px 5px 5px 5px;
  }
  
  #sidebarq {
  width: 345px;
  padding: 5px 15px;
  display: inline-block;
  }
  
  
  
  /* for 980px or less */
  @media screen and (max-width: 980px) {
  
  #pagewrap {
      width: 94%;
  }
  #content {
      width: 41%;
      padding: 1% 4%;
  }
  #middle {
      width: 41%;
      padding: 1% 4%;
      margin: 0px 0px 5px 5px;
      float: right;
  }
  
  #sidebar {
      clear: both;
      padding: 1% 4%;
      width: auto;
      float: none;
  }
  
  header, footer {
      padding: 1% 4%;
  }
  }
  
  /* for 700px or less */
  @media screen and (max-width: 600px) {
  
  #contentq {
      width: auto;
      float: none;
  }
  
  #middleq {
      width: auto;
      float: none;
      margin-left: 0px;
  }
  
  #sidebarq {
      width: auto;
      float: none;
  }
  
  }
  
  /* for 480px or less */
  @media screen and (max-width: 480px) {
  
  headerq {
      height: auto;
  }
  h1q {
      font-size: 2em;
  }
  #sidebarq {
      display: none;
  }
  
  }
  
  
  #contentq {
  background: #f0efef;
  
  }
  #middleq {
  background: #f0efef;
  
  }
  #sidebarq {
  background: #f0efef;
  }
  headerq, #contentq, #middleq, #sidebarq {
  margin-bottom: 5px;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="pagewrapq"&gt;
  &lt;section id="contentq"&gt;&lt;img class="displayed" title="Precision Engineering" alt="Precision Engineering" src="https://www.newvape.com/media/wysiwyg/calipers1.png" /&gt;
  &lt;h2 style="text-align: center;"&gt;Exceptional Engineering&lt;/h2&gt;
  &lt;p&gt;Function &amp;amp; Style influence our engineering focus for our Domeless Nails, Enails, Dabbers, Grinders and Carb Caps. Having over 50 years of engineering and design experience allows us to create products that will last a lifetime. &amp;nbsp;&lt;/p&gt;
  &lt;/section&gt;
  &lt;section id="middleq"&gt;&lt;img class="displayed" title="Made in the USA" alt="Made in the USA" src="https://www.newvape.com/media/wysiwyg/usa1.png" /&gt;
  &lt;h2 style="text-align: center;"&gt;US-Melted Metals&lt;/h2&gt;
  &lt;p&gt;We use only the finest US-melted metals. &amp;nbsp;Whether it be our grade 2 titanium, 316 stainless steel, or 6061 Aluminum, only the finest materials go into our products. &amp;nbsp;We start with the best, so we can create the best. &amp;nbsp;&lt;/p&gt;
  &lt;/section&gt;
  &lt;aside id="sidebarq"&gt;&lt;img class="displayed" title="NewVape Quality" alt="NewVape Quality" src="https://www.newvape.com/media/wysiwyg/gear1.png" /&gt;
  &lt;h2 style="text-align: center;"&gt;Advanced Function&lt;/h2&gt;
  &lt;p&gt;Our vaporizer accessories are designed to optimize your experience to get the most out of your investment. &amp;nbsp; Our Pax accessories let you extract more vapor, increase airflow, and adapt your vaporizer to work with a multiude of devices. &amp;nbsp;&lt;/p&gt;
  &lt;/aside&gt;
  &lt;/div&gt;
  &lt;div class="page-title category-title"&gt;
  &lt;h1&gt;FEATURED PRODUCTS&lt;/h1&gt;
  &lt;hr /&gt;
  &lt;h1&gt;&amp;nbsp;&lt;/h1&gt;
  &lt;/div&gt;
  &lt;h3&gt;&lt;span&gt;&lt;strong&gt;&lt;strong&gt;&lt;a title="Pax 2 Replacement Screen" href="http://www.newvape.com/pax-accessory-screen-pax2-2732/"&gt;&lt;img title="Pax 2 Replacement Screen" alt="Pax 2 Replacement Screen" src="https://www.newvape.com/media/wysiwyg/pax-2-screen-accessory-newvape.png" /&gt;&lt;/a&gt;&amp;nbsp; &amp;nbsp;&lt;a title="Domeless Combo Nail" href="http://www.newvape.com/domeless-nail-10-14-18mm-2424/"&gt;&lt;img title="Domeless Nail - Combo 10mm 14mm 18mm" alt="Domeless Nail - Combo 10mm 14mm 18mm" src="https://www.newvape.com/media/wysiwyg/domeless-nail-newvape.png" /&gt;&lt;/a&gt;&amp;nbsp; &amp;nbsp;&lt;a title="Portable enail" href="http://www.newvape.com/enail-playmate-2723/"&gt;&lt;img title="Domeless Nail - Combo 10mm 14mm 18mm" alt="Domeless Nail - Combo 10mm 14mm 18mm" src="https://www.newvape.com/media/wysiwyg/enail-newvape.png" /&gt;&lt;/a&gt;&amp;nbsp; &amp;nbsp;&lt;a title="3 inch Fine Grinder" href="http://www.newvape.com/fine-grinder-titanium-gray-2726/"&gt;&lt;img title="Fine Grinder - NewVape" alt="Fine Grinder - NewVape" src="https://www.newvape.com/media/wysiwyg/3-inch-fine-grinder-newvape.png" /&gt;&lt;/a&gt;&lt;/strong&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/h3&gt;</code></pre>
  </div>
  </div>
  </p>