title: Two divs next to each other which add up to 100% width - one appears below the other?
body: <p>I have a container div which is centred at 50% of the page width. This has 10px padding and position relative. I then have a div inside this which is set to width 80%, float left and is a different colour, and also has padding of 10px. There is another div set to float right which has width 20%. Neither of the nested divs have a border or margin. However the right one appears below the other one <strong>only</strong> up to a particular screen size.</p>
  
  <p>My html / css is as follows:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          CSS file included here
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="page-container"&gt;
              &lt;div class="right-col"&gt;&lt;/div&gt;
              &lt;div class="left-col"&gt;&lt;/div&gt;
              &lt;div class="clear"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  
  
  .page-container {
      width: 50%;
      margin-left: auto;
      margin-right: auto;
  }
  
  .left-col {
      width: 80%;
      float: left;
  }
  
  .right-col {
      width: 20%;
      float: right;
  }
  
  .clear {
      clear: both;
  }
  </code></pre>
  
  <p>This has been bugging me for ages so I would appreciate any help anyone can give me. Thanks in advance.</p>
  
  <p>Regards,</p>
  
  <p>Richard</p>