html/css misunderstanding

Cam · 2005-11-13 12:35:51

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.

Thanks

elasticdog · 2005-11-13 18:09:49

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!

Cam · 2005-11-13 23:31:53

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

Arch Linux

#1 2005-11-13 12:35:51

html/css misunderstanding

#2 2005-11-13 18:09:49

Re: html/css misunderstanding

#3 2005-11-13 23:31:53

Re: html/css misunderstanding

Board footer