CSS headspinner!! Layout problem...

Okay...

I am laying the whole page out with div's and css. It's going great. However, this final bit has caught me out:

The site has the usual copyright disclaimer (one single line of small grey text) at the bottom of the page. Now, this has to be about 5px or thereabouts away from the bottom edge of the page/browser window at all times. It sits directly below where the page content (textual) sits. The problem is, if their is only a couple of lines of text, I can get it to stick to the bottom no problem, but if there is a lot of text going beyond the window, I can't get it to follow the text down (it sticks in the same place). Alternatively, I can do the opposite, but the other way won't work!


As mentioned, the first DIV, titled (and referenced via CSS) is called body, the copyright DIV (titled copyright), I have tried nesting within the body DIV, and outside. Have tried absolute, relative, static. Nothing. Any pointers?

Thnx in adv.

EDIT:

What I am trying to achieve is the equivalent to placing a good ol' Table (Height 100%) with two rows. First row being 95%, second being 5%. If the text was a large amount it would naturally expand the first row beyond the browser window, taking the second row with it.

http://cross-browser.com/examples/menu4_template.html

This goes as a menu, but the idea is the same. I hope this helps you somehow

I am waiting for the browser to implement "fixed" for the css styles - then this problem would be solved by css

Actually, the modern browsers pretty well support "position: fixed" attribute.

Netscape6+, Mozilla, Firebird, Chimera, Galeon, Kmeleon, Opera7+, etc. support "fixed." Among the major browsers, only that non-compliant, obsolete, PoS MSIE does not support it. Unfortunatelly that one bad browser seems to rule the roost.

sympathetically,

gary

Thnx fellas...

fgeller, I don't think that's what I'm after. Here's an example page of what I am trying to do:

Here's the standard HTML table version which works fine: http://c-o2.net/testExample/test.html

And here's what's happening with the layered version: http://c-o2.net/testExample/test2.html

(I've bordered the layers to make it easier to see what's going on.) As you can see, the Copyright doesn't follow.

Quick Update:

Can anyone verify for me that the layered version (example 2 of my links) actually works in IE6 for Windows!?

It doesn't work in Safari for OS X, but on checking IE6 on XP, it does! (Ideally I would love it to work on all, but this is the real world )

http://c-o2.net/testExample/test2.html and http://c-o2.net/testExample/test2B.html look fine to me in Safari on OSX and Mozilla on linux, but test2b has the border going through the copyright text in Winie 6.0 and the box is the length of my browser window.

PS Can you put titles on your test pages. It's confusing cycling through multiple "Untitled Document"

See if this, http://garyblue.port5.com/webdev/copyrighttest2.html is what you're looking for.

Gecko engined browsers should work (tested in Mozilla1.3.1). Opera7 works with the "overflow: auto" attribute set. MSIE, as expected, does not work. It does not break, though. The copyright line is at the bottom of all text, and scrolls with the text.

If the copyright notice is not nested, IE will put it at the top left of the window if absolute positioning is used. Relative positioning can create other difficulties since the vacated space is not closed.

So, my little kludge works. The question is, is this what you want?

cheers,

gary

<mode type="edit">To give credit where credit is due, IE is the only one of the three tested that rendered the nested width (percentage) correctly. Sheesh, who'da guessed.</mode>

Thnx kk5st, but that isn't what I was after... I could get it to do just what you've done. I need the copyright to be at the bottom of the text at all times. Hence, if there is only one or so lines (not enough to go beyond the window) the copyright should sit at the bottom of the browser window, below the text, but about 5px (or so) from the bottom of the window. If the text goes beyond the window, the copyright should also be beyond the browser window at the bottom of the text.

This is similar to a page footer in print I suppose.