Compare this with this. The first one doesn't play well with different resolutions, the second one does. However if I try to set the height of div#main as a percent it doesn't work. Now I've played with this stuff before and I think I need to have div#main inside a container with a fixed height for the percent to work correctly but I can't seem to put that idea into practice, not with a working result anyway.
Can anyone see where I'm going wrong and point me right or just chuck some ideas at me that I can try? I'd appreciated it.
When using height with a percentage as your value, keep this in mind:
percentage Integer followed by a percent sign (%). The value is a percentage of the height of the parent object, which must be specified explicitly.
So, you're right that in order for the percentage to work, it must be inside a container element which has its height specified. You may be aware of this already, but the two stylesheets aren't consistent with their use of units of measurements. There's a good mix of both <code>px</code> and <code>pt</code> in there...
Also, for what you're trying to do, you shouldn't need the position attributes on either div#main, div#header, or div#footer. Simply setting your margins/padding correctly should get you the exact same look and would allow a bit more flexibility while being easier to maintain if you want to change stuff. Hope that helps!
Yeah it does help! The first one was me trying to make a page without having done so for ages Forgot about making in work in other browsers, it's good for me that's all that counts! The second attempt is a go at making it work better, I saw a screenshot of the first one at 2048x???? res and it wasn't pretty.
Thanks for that though, gave me an idea for where to look