Incorrect Div Display in Firefox

Question

My webpage displays as I expect in IE. When I get into Firefox, it makes an important div in the wrong place, discarding the layout. From what I can tell, Firefox is simply mistaken. How can I get Firefox to display the div in the right place?

I set borders around the three sections to make it easier to see where they appear. Violet is one that is incorrect in FF, but correct in IE.

EDIT

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

JSFiddle makes the code identical (and in the same way as FF) in both browsers, but IE10 displays it the way I want, and as my screenshot shows, when the page actually launches.

My code is:

<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%;" /> 

Firefox Submission:

IE renders:

As you can see, FF runs the div up above the heading text and the top hr, despite the fact that both should take the entire width. This leads to the fact that the second hr will be displayed under the red frame (along with the label, which should be further down the page), and not under the purple panel. What am I missing?

Answer 1

Your problem is known as the clearfix problem. This happens not only in FF, but also in webkit browsers (safari and chrome). I even think that only IE processes it, as you claim, you expect this.

The problem only arises when you have the parent container div and all of its children are floating inside it. For a better explanation, I suggest gougling 'clearfix'.

The solution stated by @Kev does work, but it requires you to have an extra element for your DOM, which is used only for styling, which is considered bad practice. I suggest working with some kind of .clearfix class. I usually work with one of 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 the #divTop container, and everything should be fine. An explanation of how and why this works can be found here: http://nicolasgallagher.com/micro-clearfix-hack/

Answer 2

Your HTML is completely invalid. I don’t know if you are using any fancy CMS, but that’s not at all.

• you do not close your divs inside #divtop
• Using css inline in html is bad practice as it should be very bad at change.
• if you want your divs side by side, they should get the style float:left attribute
• if you want to wrap the purple div around the rest, it must have overflow:auto to resize with its children
• InternetExplorer is NEVER suitable, try developing using firefox, chrome or safari. They must be the best of browser developers.

The result in all of this will 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 by you in your divs. If this is not an option, then Kev answered how you can fix it.

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

I created this fiddle . Take a look.