CSS positioning question

uoba

uoba

Re: member
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.
 
One thing that I know will work, if only in some browsers, is positioning it from the bottom instead of the top. copyright { position: absolute; bottom: 10px; left: 10px; } should work just fine, but I don't think IE handles the bottom directive correctly.
And then there is some new css element that looks like @footer { }, but I don't really know anything about it. I think I saw it somewhere on w3.org in some draft, I doubt it's implemented yet.
 
Try nesting your body div within another div, and after the </div> for the body, add your copywright line.
 
Tried the bottom attribute mr. K... it worked a treat on all browsers... except, yes, you guessed, IE for Windows, which, unfortunately the browser (probably 99%) that people will view this site on.

Also tried nesting every which way possible, arden. :(
 
Well, you can always fit the copywright into a <span> and insert it at the bottom of the div, or even after it. You can do the same things to a span as to a div, I should think.
 
I'm not too clued up to what the difference is between a span and a div... gonna check now!

I put the copyright in a span to see what the difference would be, but nothing. Here is a link to an example of what I need...

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.
 
Oh duh, here ya go - just give the body div a height: 90%; attribute, and the copyright div a height: 10%; attribute and if that won't work just give the copyright div 90% padding-top.
 
Will try soon (got fed up with it been working on another job...) Thnx mr. K... will try in an hour or so.
 
You must log in or register to reply here.
Back
Top