title: strange firefox float positioning, works fine in chrome/safari (CSS)
body: <p>I'm having a weird issue in Firefox that I can't seem to fix. In both Chrome and Safari my float: left and float: right columns are working properly and in the right position, but when I view it in Firefox it's wayyyy messed up. My bottom header is in the section above it, and my columns are overlapping! I've been searching around but can't really find any concrete solutions to floating differences in Firefox -- can someone take a look at my code and tell me what's going on? Or does someone have any facts about Firefox floats that I'm not aware of? Thank you!</p>
  
  <p>Here is my <a href="http://jsfiddle.net/eRhB9/" rel="nofollow">JsFiddle</a> with my code in it. The floaters seem to be okay in Firefox for the JsFiddle.. just not on my page. Ugh, I'll keep looking but I'm pretty sure it's an issue with the floats.. Removing them made everything align nicely on Firefox. At least the left column.</p>
  
  <p>Here's the relevant float css:</p>
  
  <pre><code>.fourtextleft {
      font-family: Roboto;
      text-decoration: none;
      text-transform: none;
      font-weight: 300;
      font-size: .5em;
      color: #666;
      float: left;
      width: 38%;
      height: auto;
      text-align: justify;
      margin: 0% 5% 2% 0%;
      padding: 4% 2% 3.5% 0%;
      vertical-align: middle;
  }
  
  .fourtextright {
      font-family: Roboto;
      text-decoration: none;
      text-transform: none;
      font-weight: 300;
      font-size: 1em;
      color: #666;
      float: right;
      width: 30%;
      height: auto;
      text-align: justify;
      margin: 3% 15% 2% 0%;
      padding: 4% 0% 3.5% 2%;
      vertical-align: middle;
  }
  
  .floaters {
      clear: both;
  }
  </code></pre>
  
  <p>Thank you for any help you may provide!</p>
  
  <p>ஃ Shanling</p>