FireFox Nested Div Height Bug

Note: This technote is a work in progress as I have discovered other bugs.

Eventually I will be putting together a test page to see what is needed to make both browsers "equal" in how they interpret things. I have seen this implemented before and would imagine that it will save hours of testing.

This has been a problem that has plagued be on multiple occasions and I always seem to forget the solution, so here it is.

When you have a div inside of a div, text in both, margins for both for show, and different background colors as a visual aide and the inner div is floating to the right and the outer div does not have the float property, the height will appear normal in IE (6) and incorrect in FF(7?).

Normal is that the outer div fully encompasses the inner div.

Inner div text

outer div text

(note that the code used to generate the above is only representative - blogger interprets things differently)

Another issue that I am addressing is that IE will not display the full height unless the page has been refreshed. I am looking into this and will revise as needed.

Abnormal is that the outer div collapses to only the height of its contained text, while the inner div does the same but extends past the bottom of the first div.

Inner div text

outer div text

The Solution is to add the float property to the outer div i.e. float:inherent;