title: Div rendering incorrectly in Firefox
body: <p>My web page renders as I expect in IE. When I get into Firefox, it renders an important div in the wrong place, throwing the layout off. From what I can tell, Firefox is just wrong. How can I get Firefox to render the div in the correct place?</p>
  
  <p>I've put borders around three of the divs to make it easier to see where they're being rendered. The purple one is the one that is incorrect in FF, but correct in IE.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/PYy6t/1/" rel="nofollow noreferrer">http://jsfiddle.net/PYy6t/1/</a></p>
  
  <p>JSFiddle renders the code identically (and in the same manner as FF) in both browsers, but IE10 renders it as I want it, and as my screenshot shows, when actually running the page.</p>
  
  <p>My code:</p>
  
  <pre><code>&lt;div style="float: left; clear: both; width: 100%;"&gt;
          &lt;asp:Label ID="Label1" runat="server" CssClass="hdr" Text="New Grade Entry" Font-Bold="true" /&gt;
      &lt;/div&gt;
      &lt;div style="width: 100%; float: left; clear: both;"&gt;
          &lt;hr /&gt;
          &lt;br /&gt;
      &lt;/div&gt;
      &lt;asp:UpdatePanel ID="upnlNewGrade" runat="server" UpdateMode="Conditional"&gt;
          &lt;ContentTemplate&gt;
              &lt;div id="divTop" class="Option" style="width: 100%; position:relative; border-color:purple; border-style: solid;
                  border-width: 1px;"&gt;
                  &amp;nbsp
                  &lt;div class="OptionLabel" style="width: 50%; height:inherit; border-color:green; border-style:solid; border-width:1px; "&gt;
                      //details removed
                  &lt;div class="OptionSelect" style="width: 45%; min-height:10px; border-color:red; border-style: solid; border-width: 1px;"&gt;
                      //details removed
                  &amp;nbsp
              &lt;/div&gt;
          &lt;/ContentTemplate&gt;
      &lt;/asp:UpdatePanel&gt;
      &lt;div class="Blank" style="width:100%"&gt;
          &amp;nbsp
      &lt;/div&gt;
      &lt;hr style="width: 100%;" /&gt;
  </code></pre>
  
  <p>The Firefox render:
  <img src="https://i.stack.imgur.com/KRtXe.png" alt="FirefoxPic"></p>
  
  <p>The IE render:
  <img src="https://i.stack.imgur.com/1MvY2.png" alt="IEPic"></p>
  
  <p>As you can see, FF is starting the div way up above the header text and the top hr, despite the fact that both should be taking the entire width. This is causing the second hr to render underneath the red-bordered panel (along with a label that should be further down the page), rather than beneath the purple panel. What am I missing?</p>