So I have this webpage that renders fine in both Quirky and Strict
modes under Firefox.

Website HTML: http://www.telparia.com/layout_cross_platform_test.html
Website CSS: http://www.telparia.com/layout_cross_platform_test.css

This is how it should correctly render:
http://www.telparia.com/layout_cross_platform_correct.jpg

However under IE it does not render correctly.

My goal is to either alter the current CSS or come up with a new CSS
for IE that will allow the HTML to render correctly in both Firefox
and IE.

A secondary goal is to figure out why if I resize the window too smal
vertically that the lower divs flow into the upper div (I'd like to
avoid that from happening)
See: http://www.telparia.com/layout_cross_platform_overlap_problem.jpg

So if someone could explain what I'm doing wrong in the CSS or what I
should be doing differently to achieve the layout I'm after.

Thanks.

---

Clarification of Question by sembiance-ga on 11 Mar 2006 08:08 PST

Oh, as far as what I want as an answer...
I would like the changes necessary to the CSS or new CSS in order for
the page to render correctly in IE, overflows operating etc.