CSS relative height. pulling my hair out here!

mrmiyagi · 05-23-2005, 02:47 AM

hello everyone,

I am currently attempting to create a template page for a site I'm building for a Uni project. The site is for a custom framing business, so the main content is designed to look like it is inside a frame hanging on a wall. At first it seemed as though it was working fine, as you can see here:

http://users.on.net/~longo/forum/ok/default.htm

**tested in Safari, Firefox windows/mac, Explorer Windows**

????: NamePros.com http://www.namepros.com/web-design-discussion/92229-css-relative-height-pulling-my-hair.html
But then I realised I was using absolute units for the height of the left, right, and content DIVs. I changed it from PX to %, but this caused the left and right frame border to collapse. As you can see here:

http://users.on.net/~longo/forum/bad/default.htm

Is there a way I can make the left and right DIVs (named #frameLeft and #frameRight in advanced.css) adjust themselves with the height of the main content DIV (#content)? I have tried EVERYTHING i can think of and can't seem to get it to work.

It is required that the website be Triple-A compliant with the W3C guidelines, so the design must remain liquid.

If someone can figure this one out I will donte my first born son...or thank them kindly, whatever

Rowan W · 05-23-2005, 06:57 AM

Try the first two links on this page:

http://www.google.com.au/search?q=cs...en-US:Official

mrmiyagi · 05-23-2005, 09:03 AM

thanks for the reply Rowan

Unfortunately my problem goes beyond the 100% height. I actually need the left and right frame border DIVs to extend only as long as the content that appears in the main content DIV:

Even if I alter the content so that it is short enough not to need more than 100% of the screen size (and therefore 100% height would work), the design needs to be able to be resized to less than 640x480 and still be completely readable, so it wouldn't be good enough for "them" ::annoyed grunt::
????: NamePros.com http://www.namepros.com/showthread.php?t=92229

The more tutorials I read, the more I start to loose faith that it can be done!

Rowan W · 05-23-2005, 06:32 PM

You may have to use a table, three rows would get the result you want.

mrmiyagi · 05-23-2005, 07:54 PM

nothing would make me happier than to use a row, or absolute positioning of DIVs, but the Uni course I'm doing is about Accessible Interactive Media. My site has to adhere 100% to the W3C gudelines, and tables are most definately out. I would fail if they saw the words TABLE in my design!!

????: NamePros.com http://www.namepros.com/showthread.php?t=92229
it's cool, mate. I really appreciate your help. I think I wil just move forward with the site and maybe try again at the end when I have more time.

a-ha! i've got a great solution:

http://users.on.net/~longo/forum/woohoo/default.htm

much more stable than using images. It even works in Explorer Mac! just about fell off my chair when that happened!

Rowan W · 05-23-2005, 10:56 PM

Where does it say in the W3C that tables aren't allowed?

As far as I know they're completely standard.

mrmiyagi · 05-24-2005, 07:05 AM

W3C Web Content Accessibility Guidelines 1.0:

CHECKPOINT 5.3 Do not use tables for layout unless the table makes sense when linearized.
CHECKPOINT 3.3: Use style sheets to control layout and presentation.

Technically it's not completely disallowed, but to have Triple-A compliance you can't use tables for anything other than data. Main problem is the linearisation issues and the fact that they don't transform as gracefully as floating DIVs do.

05-23-2005, 02:47 AM	THREAD STARTER #1 (permalink)
mrmiyagi New Member Join Date: May 2005 Posts: 7	CSS relative height. pulling my hair out here! hello everyone, I am currently attempting to create a template page for a site I'm building for a Uni project. The site is for a custom framing business, so the main content is designed to look like it is inside a frame hanging on a wall. At first it seemed as though it was working fine, as you can see here: http://users.on.net/~longo/forum/ok/default.htm tested in Safari, Firefox windows/mac, Explorer Windows ????: NamePros.com http://www.namepros.com/web-design-discussion/92229-css-relative-height-pulling-my-hair.html But then I realised I was using absolute units for the height of the left, right, and content DIVs. I changed it from PX to %, but this caused the left and right frame border to collapse. As you can see here: http://users.on.net/~longo/forum/bad/default.htm Is there a way I can make the left and right DIVs (named #frameLeft and #frameRight in advanced.css) adjust themselves with the height of the main content DIV (#content)? I have tried EVERYTHING i can think of and can't seem to get it to work. It is required that the website be Triple-A compliant with the W3C guidelines, so the design must remain liquid. If someone can figure this one out I will donte my first born son...or thank them kindly, whatever

05-23-2005, 06:57 AM	#2 (permalink)
Rowan W NamePros Regular Join Date: Dec 2004 Location: QLD, Australia Posts: 713	Try the first two links on this page: http://www.google.com.au/search?q=cs...en-US:Official __________________ Flash is bad for websites Why tables for layout is stupid IE IS BAD

05-23-2005, 06:32 PM	#4 (permalink)
Rowan W NamePros Regular Join Date: Dec 2004 Location: QLD, Australia Posts: 713	You may have to use a table, three rows would get the result you want. __________________ Flash is bad for websites Why tables for layout is stupid IE IS BAD

05-23-2005, 10:56 PM	#6 (permalink)
Rowan W NamePros Regular Join Date: Dec 2004 Location: QLD, Australia Posts: 713	Where does it say in the W3C that tables aren't allowed? As far as I know they're completely standard. __________________ Flash is bad for websites Why tables for layout is stupid IE IS BAD

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
CSS: what's the use of it?	lucesei	Programming	13	04-12-2004 08:21 AM
CSS Height 100%	web guru	Programming	1	10-16-2003 02:33 PM

05-23-2005, 09:03 AM	THREAD STARTER #3 (permalink)
mrmiyagi New Member Join Date: May 2005 Posts: 7	thanks for the reply Rowan Unfortunately my problem goes beyond the 100% height. I actually need the left and right frame border DIVs to extend only as long as the content that appears in the main content DIV: Even if I alter the content so that it is short enough not to need more than 100% of the screen size (and therefore 100% height would work), the design needs to be able to be resized to less than 640x480 and still be completely readable, so it wouldn't be good enough for "them" ::annoyed grunt:: ????: NamePros.com http://www.namepros.com/showthread.php?t=92229 The more tutorials I read, the more I start to loose faith that it can be done!

05-23-2005, 07:54 PM	THREAD STARTER #5 (permalink)
mrmiyagi New Member Join Date: May 2005 Posts: 7	nothing would make me happier than to use a row, or absolute positioning of DIVs, but the Uni course I'm doing is about Accessible Interactive Media. My site has to adhere 100% to the W3C gudelines, and tables are most definately out. I would fail if they saw the words TABLE in my design!! ????: NamePros.com http://www.namepros.com/showthread.php?t=92229 it's cool, mate. I really appreciate your help. I think I wil just move forward with the site and maybe try again at the end when I have more time. a-ha! i've got a great solution: http://users.on.net/~longo/forum/woohoo/default.htm much more stable than using images. It even works in Explorer Mac! just about fell off my chair when that happened!

05-24-2005, 07:05 AM	THREAD STARTER #7 (permalink)
mrmiyagi New Member Join Date: May 2005 Posts: 7	W3C Web Content Accessibility Guidelines 1.0: CHECKPOINT 5.3 Do not use tables for layout unless the table makes sense when linearized. CHECKPOINT 3.3: Use style sheets to control layout and presentation. Technically it's not completely disallowed, but to have Triple-A compliance you can't use tables for anything other than data. Main problem is the linearisation issues and the fact that they don't transform as gracefully as floating DIVs do.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)