I'm having big problems with designing a skeletton for my website. The website worked perfect, just it was bloated because i was using a lot of tested tables. Once a friend interested me into using as much as CSS as possible and using DIV-tags instead of tables, i finally got to redesign the layout of my website.
So what's the problem?
The problem is MSIE, but i'll get back to that later.
The problem is that replacing tables with div tags using CSS properties is just not working out, i can't get the site to look the same on Mozilla Firebird (a standards-compliant browser) and MSIE (a non standards-compliant browser).
To illustrate this problem, i've written a supersimple test html page.
Show me the pics!
Sure, for your convenience i've photoshopped you a basic layout of the site:
Clarification: both the left and the content section are of defined width, they don't stretch when you make the browser larger. Instead, the right section fills up all the space. The height is always 100%, so that the foot section will be at the bottom.
Seems like an aweful standard site, right? Would it be too much to ask for this to actually work, without using tables? I was shocked to found out..
So what the hell's not working
Microsoft's inability to correctly display valid HTML code. But besides that, the following:
This is my effort to try to implement the layout as shown in the picture above (click on the link). Please look at the source of the page as well, it's really simplified. Also note that the page is valid HTML 4.01 strict and uses valid CSS code, tested with W3C validator.
This site will work more or less with a standards-compliant browser like Mozilla Firebird, but MSIE screws this up 100%, probably because it sticks it's tail behind it's feet when it encounters a height: 100% CSS value. PANIC! WE GOTHA USE CSS! Ok i'll cut the flame.
So what do you want to know from us?
Well.. how the hell do I implement the layout as in the picture, without using tables? Even with Mozilla Firebird, I came across two problems:
1. The right-section does not fill up all the space, only the width of the text is used, setting width to auto or to 100% won't give the desired result.
2. Because the "main" div used height: 100%, the foot section isn't visible; you gotha scroll down. Now this ain't a problem if the content in the middle is rather long; but on short pages I want the footer to be visible.
Could you guys please help me out? I spent over 2 days (10 hours total) trying almost everything, but no implementation got near to what I want *and* looked the same on both Mozilla Firebird and MSIE6.
Thanks alot for reading and your efforts!
A rather disappointed and pissed off girl,