CSS code to position element at bottom of page

[toolkit]

Hi

I've been trying to get my head around this for ages but have yet to come up with the goods :(

What I need is the CSS code to position a <div> element at the bottom of a page (I can't use absolute positioning as the page structure must be liquid)

Can anyone help me out?

Cheers!

[Roy Sinclair]

I was starting to wonder about how to do this when the obvious question came up? Why not just re-order the html code to place the div at the bottom?

[toolkit]

Hi Roy

That would indeed be one way to do it, but I'm trying out certain search engine promotion techniques with this site and want the content in the <div> in question to be rather high up in the source code order (I'm trying to ascertain whether content placed at the top of the html code is given more weight etc)

Thanks for the response though :)

[Tails]

There is a way to detect the height of a window with JS, but I forget where that page was. I know it is on this site though. Subtract the width of your div height from that and absolute position it. I'll look later if you still need help, but I only have a minute to go.

[toolkit]

Thanks for the reply Tails

I'd rather not use Javascript to write any of my code, as then it won't get read by spiders. I've developed a workaround for my problem though.

[Tails]

Wait, you actually want spiders? I have gone through tons of trouble cloaking my email using script tags specifying a js file. And that file has a document.write and contains a @ (entity 064) to hide the @ sign from automatic seek and spam bots. JavaScript has its ups as well as downs.

[toolkit]

I meant search engine spiders - not spam bots.

[Tails]

Engine spiders? I need some help with that too. My site comes up in search engines, but the description is just a bunch of text that all my links have. My meta tags do not work.

[GoHF]

this may sound silly, but why don't you place the contens of that div you want to show on the bottom of the page on another div that is on the top of your code but has the display set to "none", or visibility to "hidden" and position set to "absolute" and z-index set to "-1"?

I mean, if it's a lot of stuff you have inside that bottom div, then duplicating it may be heavy on your pages, otherwise it should work perfectly on those blind "search engine spiders", as I doubt they skip "hidden" divs when they are parsing code. I doubt they even parse CSS.

Another option, which requires Javascript enabled browsers, is to place all the code of the bottom div on the top hidden div and leave the bottom div empty. Then, when the page loads, do a:

bottomDiv.innerHTML = topDiv.innerHTML;

this would copy the contents of the hidden top div to the visible bottom div, thus rendering the page as you wish, and it would avoid your users downloading duplicate code. These are just ideas :)

[toolkit]

I like your last idea GoHF :thumbsup: