title: Align divs left and right of center div
body: <p>I have a total of 7 divs, where 1 one is designated for the middle. </p>
  
  <p>It's supposed to look something like this:
  <img src="https://i.stack.imgur.com/kcCkg.png" alt="representation"></p>
  
  <p>I get the top two pictures and the knife correctly aligned, but the other does not appear how I want them.</p>
  
  <p>Here's the CSS: </p>
  
  <pre><code>.vegetablewrapper {
      width: 100%;
      overflow: hidden;
      background-color: white;
  }
  .vegetableleft {
      float: left;
      width: 350px;
      padding: 5px;
      margin-left: 5px
  }
  .vegetableright {
      float: right;
      width: 345px;
      padding: 5px;
      margin-right: 8px;
  }
  .vegetablemiddle {
      float: left;
      width: 200px;
      padding: 5px;
  }
  </code></pre>
  
  <p>And HTML:
      </p>
  
  <pre><code>    &lt;div class="vegetableleft"&gt;
          &lt;img src="bilder/leek.jpg" alt="leek"/&gt;
      &lt;/div&gt;
  
      &lt;div class="vegetablemiddle"&gt;
          &lt;img src="bilder/knife.jpg" alt="knife"/&gt;
      &lt;/div&gt;  
  
      &lt;div class="vegetableright"&gt;
          &lt;img src="bilder/leekcut.jpg" alt="leek cut"/&gt;
      &lt;/div&gt;
  
      &lt;div class="vegetableleft"&gt;
          &lt;img src="bilder/onion.jpg" alt="onion"/&gt;
      &lt;/div&gt;
  
      &lt;div class="vegetableright"&gt;
          &lt;img src="bilder/onioncut.jpg" alt="onion cut"/&gt;
      &lt;/div&gt;
  
      &lt;div class="vegetableleft"&gt;
          &lt;img src="bilder/carrot.jpg" alt="carrot"/&gt;
      &lt;/div&gt;
  
      &lt;div class="vegetableright"&gt;
          &lt;img src="bilder/carrotcut.jpg" alt="carrot cut"/&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>With the given code my site looks like this:
  <img src="https://i.stack.imgur.com/WZ9rl.png" alt="enter image description here"></p>
  
  <p>How could this be done correctly?</p>