CSS layout error - overlapping content

[MagSafe]

Hi there folks,

Got another problem with the website i'm developing and it's been driving me crazy all morning, just had to restore the backup i made because the css file got so muddled up after me trying for hours to try and get this sorted.

IE (How its suppost to appear)

Firefox (The two div's overlapping each other

Basically two div's are overlapping each other in Firefox, when there loading fine in IE. I've been mucking about with position: relative, top: 0 and putting the height in for one of the divs (the other can't be given a height because it needs to flow down the page with content) but it just isn't budging ... using top: 0 (or top: 20px) pushes the content/lower div underneath the footer at the bottom of the page so i can't use that ... and even if i try to put <br /> tags (which i know isn't ideal) it just spoils it in IE.

I haven't tried using z-indexes yet because i figured this would only change the layering of the div's, rather than define each div as seperate content areas that shouldn't be overlapped in the first place...although i guess if the top div has a z-index of -1 then that would what could be telling the browser to overlap the other div? The annoying thing is both div's, well...certainly the lower div needs to be positioned relative to the rest of the content so the content can flow down the page properly.

I'm just wondering it theres a way to properly define a div so that all browsers will know it is actually a div with content in it and should correctly be positioned onto the page rather than it just randomly floating there with other content being allowed to appear over it.

Would really appreciate any advice/help given, thanks

 

[huppy]

Have you tried some sort of a clear: both tag? I'm guessing that some of that lot is floating it may not work, depending on how you've coded it with the floats, just an idea

 

[MagSafe]

bah, ofcourse ... i even had the same problem with my footer because of that ages ago

thanks mate, such a simple solution but solved so many hours of hascel for me

I really should get some sort of up to date css book, i don't know if there is one - but a book that actually shows you browser incompatibilites and tips and tricks on how to solve them, something like that would be really useful , will have a look on amazon later maybe.

thanks again, really appreciate it

edit: ah... there seems to be a great book on exactly what i said above, its called The CSS Anthology: 101 Essential Tips, Tricks and Hacks by SitePoint in case anyones interested