title: Div width percentage not working in CSS
body: <p>Here is my CSS:</p>
  
  <pre><code>.leftdiv {
      width:20%;
      border:2px solid blue;
      float:left;
  }
  
  .middlediv {
      width:60%;
      border:1px solid orange;
      float:left;
  }
  
  .rightdiv {
      width:20%;
      border:1px solid black;
      float:right;
  }
  </code></pre>
  
  <p>Here is my html:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="leftdiv"&gt;left&lt;/div&gt;
      &lt;div class="middlediv"&gt;middle&lt;/div&gt;
      &lt;div class="rightdiv"&gt;right&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>What I expect to see is three divs across the screen taking up 100% of the screen width.</p>
  
  <p>Instead see this:</p>
  
  <p><a href="https://i.stack.imgur.com/DniZj.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DniZj.jpg" alt="enter image description here"></a></p>
  
  <p>The right div is on the next line.</p>