title: CSS Positioning - Fill whitespace from floated elements
body: <p>How do I go about positioning Box4 so that is pushed up against Box1?</p>
  
  <p><img src="https://i.stack.imgur.com/E1eTL.png" alt="enter image description here"></p>
  
  <p>Looking forward to your suggestions and any help would be much appreciated.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link rel="stylesheet" href="align.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div&gt;
          &lt;section class="boxes"&gt;
          &lt;b&gt;BOX1&lt;/b&gt;
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, nihil excepturi laudantium ipsum! Voluptate ducimus velit voluptatibus, molestias modi quia dignissimos sint dolorum quasi nemo asperiores sit reiciendis ipsam, neque?
      &lt;/section&gt;
      &lt;section class="boxes"&gt;
      &lt;b&gt;BOX2&lt;/b&gt;
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, nihil excepturi laudantium ipsum! Voluptate ducimus velit voluptatibus, molestias modi quia dignissimos sint dolorum quasi nemo asperiores sit reiciendis ipsam, neque?
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, nihil excepturi laudantium ipsum! Voluptate ducimus velit voluptatibus, molestias modi quia dignissimos sint dolorum quasi nemo asperiores sit reiciendis ipsam, neque?
      &lt;/section&gt;
      &lt;section class="boxes"&gt;
      &lt;b&gt;BOX3&lt;/b&gt;
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, nihil excepturi laudantium ipsum! Voluptate ducimus velit voluptatibus, molestias modi quia dignissimos sint dolorum quasi nemo asperiores sit reiciendis ipsam, neque?
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, nihil excepturi laudantium ipsum! Voluptate ducimus velit voluptatibus, molestias modi quia dignissimos sint dolorum quasi nemo asperiores sit reiciendis ipsam, neque?
      &lt;/section&gt;
      &lt;section class="boxes"&gt;
      &lt;b&gt;BOX4&lt;/b&gt;
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, nihil excepturi laudantium ipsum! Voluptate ducimus velit voluptatibus, molestias modi quia dignissimos sint dolorum quasi nemo asperiores sit reiciendis ipsam, neque?
      &lt;/section&gt;
      &lt;section class="boxes"&gt;
      &lt;b&gt;BOX5&lt;/b&gt;
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, nihil excepturi laudantium ipsum! Voluptate ducimus velit voluptatibus, molestias modi quia dignissimos sint dolorum quasi nemo asperiores sit reiciendis ipsam, neque?
      &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <pre><code>.boxes {
      width: 500px;
      border: 1px solid black;
      float: left;
  }
  </code></pre>