CSS Layout Challenge!

[joeriatscripts]

Hey there,

Everytime I am trying to create something in CSS, it gives me a headache. This time no different, as FF and IE seem to have their own rules!

Anyway, before I continue, have a look at the following page:
www.lamberang.i nfo/test/final_layout.ht ml

I am trying to create a flexible page layout, where as the screen is larger, I can resize (not important I how do this right now) the outer div (container) and all boxes will resize with it. At this stage I do have this working, just I have some problems:

IE.
- In Content DIV (Purple) the scrollbars do not automatically appear (overflow: auto) and if they do appear (select text to make them appear) the box seems to be under the Footer DIV (Yellow).

FF
- This is how it basically should be. Scrollbar and all work fine. (Had to create a SUB DIV as the Content DIV (Purple) would totally dissapear in FF when I made it overflow: auto, look here: www.lamberang.i nfo/test/final_layout_ff .html ).
- The height of the Vibes DIV (Pink) is not good. But I could adjust this with JS if there is not other way in doing this!

On top.... The whole box should flow in the middle/center of the page. Well, tried this with a table, but this mix up the whole CSS again!!!

So.... I know it is a a lot, but I have been breaking my head for days now, sleepless nights... And I cant figure it out! Please, anyone, give me some clues!

Thanks!

[drhowarddrfine]

I'm out of town so can't help much. However, Firefox should be your reference for correct html/css behavior as IE is old, buggy and non-standard. Validate both your html and css for a list of errors.

[joeriatscripts]

Ok... I got a little bit further now, with help of Javascript.
http://www.lamberang.i nfo/test/final_layout_29 .html

Key was that I had to use fixed heights for all DIV's. Now I still set it to 100%, but adjust it later on with javascript, to make all boxes same height. If this can be differently, please let me know!

Last problem I have, was that within the content DIV, the purple one, I had to use a sub DIV with a smaller width, to have it shown ok in IE. This is a work around, dont know or this can be done differently....