title: How do I stop these divs from overlapping?
body: <p>I have three divs, within a content div.</p>
  
  <p>Container width 70%.
  Within that I have
   -Left, width 20%.
   -Content, width 60%.
   -Right, width 20%.</p>
  
  <p>I would like container to take up 70% of the page's width, and the inner ones (left, content, and right) to take up 20%, 60% and 20% of the container div.</p>
  
  <p>I have tried other questions on here, I have tried Google, but can't seem to find the right answer. Please help me stop them from overlapping.</p>
  
  <p><img src="https://i.stack.imgur.com/AP2A8.gif" alt="Maximized Browser"></p>
  
  <p>But when I re-size the browser, the divs overlap. Like this:</p>
  
  <p><img src="https://i.stack.imgur.com/rP3MY.gif" alt="Re-sized Browser"></p>
  
  <p>Here's the relevant CSS code:</p>
  
  <pre><code>#container{
      width: 70%;
  }
  #left {
      float: left;
      width: 20%;
      min-width: 200px;
  }
  #content {
      float: left;
      width: 60%;
      min-width: 600px;
  }
  #right {
      float: right;
      width: 20%;
      min-width: 200px;
  }
  </code></pre>