Div rendering incorrectly in Firefox

Question

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?

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.

EDIT

JSFiddle: http://jsfiddle.net/PYy6t/1/

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.

My code:

<div style="float: left; clear: both; width: 100%;">
        <asp:Label ID="Label1" runat="server" CssClass="hdr" Text="New Grade Entry" Font-Bold="true" />
    </div>
    <div style="width: 100%; float: left; clear: both;">
        <hr />
        <br />
    </div>
    <asp:UpdatePanel ID="upnlNewGrade" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <div id="divTop" class="Option" style="width: 100%; position:relative; border-color:purple; border-style: solid;
                border-width: 1px;">
                &nbsp
                <div class="OptionLabel" style="width: 50%; height:inherit; border-color:green; border-style:solid; border-width:1px; ">
                    //details removed
                <div class="OptionSelect" style="width: 45%; min-height:10px; border-color:red; border-style: solid; border-width: 1px;">
                    //details removed
                &nbsp
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
    <div class="Blank" style="width:100%">
        &nbsp
    </div>
    <hr style="width: 100%;" />

The Firefox render:

The IE render:

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?

Answer 1

Your issue is known as the clearfix problem. It is not only occuring in FF, but also in webkit browsers (safari and chrome). I even think that only IE handles it as you state you expect it to.

The problem only occurs when you have a parent div container, with all its children floating inside it. For a better explanation i suggest googling 'clearfix'.

The solution stated by @Kev does indeed work, but it requires you to a an extra element to your DOM, wich is only used for styling, wich is considered bad practice. I suggest working with some sort .clearfix class. I usualy work with the one from twitter bootstrap:

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
    // Fixes Opera/contenteditable bug:
    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
    line-height: 0;
  }
  &:after {
    clear: both;
  }
}

All you have to do is apply it to your #divTop container and you should be fine. An explanation on how and why it works can be found here: http://nicolasgallagher.com/micro-clearfix-hack/

Answer 2

Your HTML is pretty invalid at all. I don't know if you're using some fancy CMS but it's not right at all.

1. you don't close your divs inside #divtop
2. using css inline in html is bad practice, as it's supposed to be very poor in changing it.
3. if you want your divs side by side, they have to get the style attribute float:left
4. if you want to wrap the purple div around the others, it has to have overflow:auto in order to resize with its children
5. InternetExplorer is NEVER right, try to develop with firefox, chrome or safari. These are supposed to be the best of the developer browsers.

The result in all this would be:

<div style="float: left; clear: both; width: 100%;">
    <asp:Label ID="Label1" runat="server" CssClass="hdr" Text="New Grade Entry" Font-Bold="true" />
</div>
<div style="width: 100%; float: left; clear: both;">
    <hr />
    <br />
</div>
<asp:UpdatePanel ID="upnlNewGrade" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <div id="divTop" class="Option" style="width: 100%; position:relative; border-color:purple; border-style: solid;
            border-width: 1px; overflow:auto">
            &nbsp
            <div class="OptionLabel" style="width: 50%; height:inherit; border-color:green; border-style:solid; border-width:1px; float:left;">
                <p>Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            </div>
            <div class="OptionSelect" style="width: 45%; min-height:10px; border-color:red; border-style: solid; border-width: 1px; float:left;">
                <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>
<div class="Blank" style="width:100%">
    &nbsp
</div>
<hr style="width: 100%;" />

Answer 3

If you can, then clear the float:left you have in your divs. If thats not an option, then Kev answered how you can fix it.

float:left;//remove it or change it into
float:none;

I've created this fiddle. Take a look.