Div Rendering Incorrectly In Firefox

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

Solution 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-36952line-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/

Solution 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:

<divstyle="float: left; clear: both; width: 100%;"><asp:LabelID="Label1"runat="server"CssClass="hdr"Text="New Grade Entry"Font-Bold="true" /></div><divstyle="width: 100%; float: left; clear: both;"><hr /><br /></div><asp:UpdatePanelID="upnlNewGrade"runat="server"UpdateMode="Conditional"><ContentTemplate><divid="divTop"class="Option"style="width: 100%; position:relative; border-color:purple; border-style: solid;
            border-width: 1px; overflow:auto">
            &nbsp
            <divclass="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><divclass="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><divclass="Blank"style="width:100%">
    &nbsp
</div><hrstyle="width: 100%;" />

Solution 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 intofloat:none;

I've created this fiddle. Take a look.