Edit: Doh!!! That example link looks fantastic, but it's not doing as I need either...as I need the content DIV to be 100% width so I can use it as faux column or create a child DIV and set it's height to 100%....frick...either of you know how to fix that by chance?
Now now, lets stay on track guys...it's me with the problem which we are disscussing...not whose right or wrong about CSS
nickvd. That comment you made about not always being relative to the viewport...that can be changed with a selector right?
b > #myid
Would bind any DIV with id
'myid' making absolute elements reltive to <b>???
Anyways, after an exhaustive search I found this article:
http://www.xs4all.nl/~peterned/examples/csslayout1.html
Sounds like pretty much what I am after...
I'll explain why.
I have a typical design, it has a fixed header (80px - and would nice to include a footer but I can live with just a header for now) and a content area.
The content area will sometimes have more content than can visibly fit on screen, so scrollbars are inevitable. Other times, it's almost empty with nothing but a wanring message.
If I had a footer, then I would want that footer aligned or bound to the bottom of the content area. If there is no content, the the footer is almost flush with the header, so figuring a way to align the footer to the bottom is ideal in terms of aesthetics. Thankfully I don't have a footer for this project, but other projects will alsmot certainly have a footer (so I figured why not learn now while i'm on a roll?).
Here is why I wanted a "full-height" content area (not because of a footer).
Some pages are just single wide column and others have a right column which is light in color. That right column should fill the entire height, but I can't use faux columns, because I already have the layout gutter/side walls painted on the <body>
basically a single pixel high image which is 640 pixels wide with white in the middel and a greyish gradient on the left and right sides which is repeated vertically and centered in the body tag.
The only way I seen to have a right column fill the entire vertical space, was to set it's height to 100% but doing this has negative side effects because a DIV assumes the height of it's parent.
By having a DIV inside a full-height parent DIV the right aligned DIV can now have a custom picture, bk color, etc...so I don't use faux columns (cuz I can't). I can't use faux columns, because only *some* pages will require that right aligned column, so instead of building two master templates, I build one and just add more layout to the full-height content area.
Anyways, hopefully that helps further clear up my requirements...again...dumping my thoughts is helping me better understand what it is I am trying to accomplish.
Cheers
