title: How to make this part of my layout work?
body: <p>How can I make this part of my layout work?</p>
  
  <p>I can't work out how to fix this. Its become so messy and confusing.</p>
  
  <pre><code>    &lt;div style='width: 900px; margin:0 auto'&gt;&lt;div style='float: left; width: 312px; height: 197px; background-color: #A857BC'&gt;&lt;/div&gt;
      &lt;div style='float: left; width: 249px; height: 197px; background-color: #FF80C0'&gt;&lt;/div&gt;
      &lt;div style='float: left; width: 339px; height: 197px; background-color: #8C83FC'&gt;&lt;/div&gt;
      &lt;/div&gt;&lt;div style='margin:50px;background-color: #99CCCC; margin-top:-150px;height:100px; '&gt;this should be in the middle&lt;/div&gt;
  
  &lt;/div&gt;
  
      &lt;div style='width: 900px; margin:0 auto'&gt;&lt;div style='float: left; width: 362px; height: 197px; background-color: #A857BC'&gt;&lt;/div&gt;
      &lt;div style='float: left; width: 147px; height: 197px; background-color: #FF80C0'&gt;&lt;/div&gt;
      &lt;div style='float: left; width: 391px; height: 197px; background-color: #8C83FC'&gt;&lt;/div&gt;
      &lt;/div&gt;&lt;div style='margin:50px;background-color: #99CCCC; margin-top:-150px;height:100px; '&gt;this should be in the middle&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>