[CSS] The horror of layout design

Hi all,

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:

http://www.fluffles.net/images/layout.png

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:

http://www.fluffles.net/layout.html

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,

Enlightenment

BTW, I did get this design working by using position: fixed. This way, the object would be fixed at a certain position, and will stay that way even if you scroll or whatever. Fixed as in, display that object at this place at all times.

But of course MSIE had other plans than to implement this feature. MSIE is *NOT* HTML and CSS2 compliant. But you guys already knew that, of course.

*sigh*

add height:100% to body in the css,
and it should work in ie as well

You might want to look at this site for some brain churning.

You're right about MSIE, always dumbing down or writing ugly hacks for that PoS.

cheers,

gary

I've found that the simple CSS layout on <realworldstyle.com> works nicely across browsers. There's also a method of always positioning the footer at the bottom of the page, you can find it <here>.