just to check... when you say header:fixed and menu:fixed, do you mean 'fixed' in the sense that it stays on the page when the rest scrolls?

because you're right, you can't really do that in CSS alone. at least, you can, but it wont work in IE6 (which is a lot of users!). you can get it to work okay if you don't mind using a bit of javascript. but then, of course, not everyone will have javascript turned on.

if you do a search of this in google, then it will bring up various javascript fixes that will make it work:

javascript position:fixed script IE6

Yes I do mean fixed as in they stay on the page. The problem is not with this, it's with the lack of support for unknown sizes. CSS works brilliantly for everything if you specify everything in px and nothing changes.

When you try and make a scalable site based on ems or %age, css fails pretty quickly.

Left and top is fine, but right and bottom? Take the simple other problem I posted in this forum, how to add rounded corners, or any other border to an area of unknown height.

I'm constantly frigging my CSS layouts to get them to behave, I have learnt a lot from the guys here, but I think this is a basic request and someone should be able to do it?

So far I've reverted to an awful lot of JavaScript. But it works. And is cross browser.

We all know how this would be done with a table

can it and I don't know how..

Table, height 100%, 4 rows, header with 100px height, menu with 3em height, content with no height defined, footer with 20px height?

and does that work - universally?

an awful lot of JavaScript

It does now.

CSS has perfectly fine height control, it’s a certain browser that decides to not apply it properly.

It’s a certain browser that decides not to apply several CSS1 properties properly, or with horrendous bugs.

It’s not the fault of CSS.

because you're right, you can't really do that in CSS alone. at least, you can, but it wont work in IE6 (which is a lot of users!). you can get it to work okay if you don't mind using a bit of javascript. but then, of course, not everyone will have javascript turned on.

Actually, you can do this and make it work in IE 6.

Stu Nicholls has an article on position fixed (google for stu nicholls fixed) which works perfectly fine in IE 6.

But hey—if you want to revert back to tables for layout, that’s your choice :) I’d prefer semantic markup.

yeah, pretty much all browsers (other than IE) support position:fixed, so just run that, and run a script only for IE, so they are the only ones who need javascript enabled (which is probably practically all of IE users anyway)

I have seen those kind of layout made for cross-browser compatibility, though. I see them advertised as if they were really cool and special, when I didn't think much of them. I guess they are pretty special though ,because they use specific techniques and 'hacks' to ensure most if not all browsers support it well.

Personally, I could never ever live designing sites with tables (as layout)... unless I was using a WYSIWYG editor, in which case I still wouldn't like it for two reasons: one, I dislike those editors, two, it's still messy and bulky code.

[edited by: Xapti at 5:33 am (utc) on April 12, 2007]

so if a table can only do it with a lot of JS, why not go with CSS and a little JS?

It would be a shame if you decide that this is to be your LAST CSS site because of something that's closer in CSS than it is with a table ;)

Remember that CSS is just a suggestion to the browser about how a page layout should be displayed, generally the recs are flexible to allow the varying different browsers to interpret them to suit their needs, for example with this layout how should small screens handle it - should the whole screen be taken up with the fixed portions and show no content, should it have a massive side scroll to accommodate a table

You could do what some other designers do and just offer enhanced versions to the browsers that can cope and offer a suitable not so fancy version for those that don't this would allow you as designer to carry on learning the techniques without too much worrying about back compatibility?

In answer to your question:
>>Bottom line, is this possible with pure CSS and no tables?

Yes, it's possible with pure CSS with both the solutions you ruled out, and it's also likely possible to get close using a faux background technique without JS - but it's IE and possibly V4 browsers that is your problem - it's not CSS.

Suzy

Stu Nicholls has an article on position fixed

Thanks Setec, read that, I'd actually already tried something similar, the problem isn't so much the position fixed as the positioning of the content. As it's a scroller anyway then position absolute would work in this case for the footer.

never ever live designing sites with tables (as layout)...

Xapti, this was how we all used to do it, if they hadn't taken the support for 'height' out we probably still would.

still messy and bulky code

Yes if you use an editor, not if you write it yourself.

both the solutions you ruled out, and

I only ruled them out as they're don't work in all browsers. Incidentally, which browsers do NOT support the top, right, bottom, left approach, as this indeed would work well? I'm not here to poo-poo your methods, you guys know more about CSS than me, especially layouts. I'm here in the hope you guys can help me find a solution to my indended layout.

it's IE and possibly V4 browsers

Totally agree, but unfortunately doesn't solve the problem.

generally the recs are flexible to allow the varying different browsers to interpret them to suit their needs

Really? It was my understanding that the whole point of the strict doctype and things called 'standards' were to create rules so each browser would follow them to the letter and display a page the same each time.

why not go with CSS and a little JS

ok, I'm up for that, what would you suggest?

Really? It was my understanding that the whole point of the strict doctype and things called 'standards' were to create rules so each browser would follow them to the letter and display a page the same each time.

Ah if only... life would have been easier ;) - but boring!

but seriously, some time ago the word standards was changed to recommendations don't remember when, although CSS1 is now also only a recommendation too ;)

Web Standards encompasses so much more than RULES, the web is ever changing and to submit it to rules rather than guidelines would be constricting - It's impossible to keep everyone/every media happy all of the time but it does need a "body" to keep it 'in line' - which is where the W3C have played a sterling game IMHO, if they hadn't raised the bar it would never have been set in the first place and we could well be dealing with a much worse scenario

what would you suggest?

The same as the very first answer you ever got (your first thread) which involved a little JS for IE's counting, or the same as the advice you have here in this thread already {JS for IE's position : fixed;} - the method is tested, Stu Nicholls has browser support of his tests and we do have an older thread (2003) here in the library re:emulating frames [webmasterworld.com] which might help you deduce which of the older browsers will support what you're not sure about

other than that if you're attempting to push the envelope you need to test, test, test & learn what is a real bug rather than a browser interpretation of a recommendation before you give up - support wouldn't be here today without the pushing. :)

Thanks for putting up with me Suzy! I think I'll go with the answer to my first ever thread.

I was hoping there was a better way.

IE7 works with 4 borders, so I guess it's only IE6 I'm worried about so I'll write a fix for the 4 margined approach.

Sorry to be a pain, I'm just trying to work out the best way to achieve this before I start so I don't have to rewrite the whole thing later!

I will share all this code with you to make up for my whining!

hope this will solve your problem

<html>
<head>
<title>Untitled Document</title>
<style>
body { margin:0;padding:0;height:100%; background:url(anand) fixed;}
#wrap {height:100%;}
#header { background-color:#00CC33;width:100%;height:5em;;position:fixed;z-index:10;}
#content {padding:5em 2em;}
#footer {background-color:#00CC33;width:100%;height:2em;position:fixed; bottom:0;z-index:10;}
* html #header { position:absolute;top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat')? documentElement.scrollTop : document.body.scrollTop)}
* html #footer {position:absolute;top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat')? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));}
</style>
</head>

<body>
<div id="wrap">
<div id="header">
rtuytryrt
</div>
<div id="content-wrap">fdsgdsdsdssd
</div>
<div id="footer">asdasD</div>
</div>
</body>
</html>

sorry, this is the corrected one

<html>
<head>
<title>Untitled Document</title>
<style>
body { margin:0;padding:0;height:100%; background:url(anand) fixed;}
#wrap {height:100%;}
#header { background-color:#00CC33;width:100%;height:5em;;position:fixed;z-index:10;}
#content {padding:5em 2em;}
#footer {background-color:#00CC33;width:100%;height:2em;position:fixed; bottom:0;z-index:10;}
* html #header { position:absolute;top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat')? documentElement.scrollTop : document.body.scrollTop)}
* html #footer {position:absolute;top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat')? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));}
</style>
</head>

<body>
<div id="wrap">
<div id="header">
rtuytryrt
</div>
<div id="content">fdsgdsdsdssd
</div>
<div id="footer">asdasD</div>
</div>
</body>
</html>

Asmanand, please see this thread:

[webmasterworld.com...]

It's SuzyUK's original solution to this that she referred to earlier.