title: Make 3 column divs responsive. Help me spot what I'm doing wrong?
body: <p>The div elements inside the row are floated left, as described here:
  <a href="http://www.w3schools.com/html/html_responsive.asp" rel="nofollow noreferrer">http://www.w3schools.com/html/html_responsive.asp</a>
  and percentage sized.
  I tried to apply what was suggested in this link below, in a similar question, but without success:
  <a href="https://stackoverflow.com/questions/18229169/responsive-css-inline-divs">Responsive CSS / Inline divs</a></p>
  
  <p>The divs keep an inline relation of 50% - 100% - 50% and their contents overlap.
  Can anyone help me spot what I missed?
  Thank you.</p>
  
  <p>In my CSS and HTML I have:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>footer[role="contentinfo"] div {
  box-sizing: border-box;
  }
  .engage-row:after {
    content: "";
    display: table;
    clear: both;
  }
  .col-1 {
    float: left;
    width: 25%;
  }
  .col-2 {
    float: left;
    width: 50%;
    padding: 10px 20px 0px 20px;
  }
  .col-3 {
    float: left;
    width: 25%;
  }
  .footer-wfix {
    clear: both;
  }
  
  /* for illustrative purposes */
  
  .engage-row {
    border: 1px solid red;
  }
  .engage-row &gt; div {
    border: 1px solid blue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;footer id="colophon" role="contentinfo"&gt;
  &lt;div class="footer-wrap"&gt;
    &lt;div class="engage-row"&gt;
      &lt;div class="col-1"&gt;
        Column 1
      &lt;/div&gt;
      &lt;div class="col-2"&gt;
        Column 2
      &lt;/div&gt;
      &lt;div class="col-3"&gt;
        Column 3
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="footer-wfix"&gt;
        Footer Menu and Site-generator
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/footer&gt;&lt;!-- #colophon --&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Edited the code and am adding the below for clarity:
   - I edited the footer by adding the "engage-row" and it's containing column divs.
   - All divs have inherited box-sizing: border-box.
   - Column 1, Column 2 and Column 3 don't readjust positioning when I decrease the screen size (width); instead of becoming on top of each others, they are changing their size (keeping percentages but becoming smaller), making the containing text and images overlap (text from column 2 goes in front of the image in column 1). I hope I am using the correct terms for clarity.
   - How can I make them readjust the positioning as the screen size changes?
   - PrintScreen: <a href="https://drive.google.com/file/d/0BwA1IuXMUSGIcjJ2TjdzX2pwTEE/view?usp=sharing" rel="nofollow noreferrer">3column divs in footer</a></p>
  
  <p>(This is an awesome site. Thank you)</p>