5 replies [Last post]
Gasolene
Offline
newbie
Last seen: 17 years 31 weeks ago
Joined: 2004-02-14
Posts: 6
Points: 0

How do i get a div to stay at the bottom of a page.

if page is less than browser window height, then div should be at bottom of browser.

if page is more than browser window height, then div should be below all content.

thnx

exp
Offline
newbie
Last seen: 17 years 4 weeks ago
Timezone: GMT+1
Joined: 2004-08-17
Posts: 1
Points: 0

place something on bottom of page

I've created a little example, where the footer is always placed beneath al other content - maybe you can use it:
firewerx.dk/css/?style=forest

Gasolene
Offline
newbie
Last seen: 17 years 31 weeks ago
Joined: 2004-02-14
Posts: 6
Points: 0

place something on bottom of page

thnx,

the problem is, the page may not fill the entire view area.

I would like the footer at the bottom of the view area.

LinuxGold
Offline
newbie
Last seen: 17 years 4 weeks ago
Joined: 2004-08-18
Posts: 3
Points: 0

place something on bottom of page

What you're attempting is called CSS-P (CSS Positioning) which is not fully developed. I would suggest to use table as body like so:

<table summary="" cellspacing=0>
<tr><td>

Main contents here

</td></tr>
<tr>
<td class="footer">This stays on bottom</td>
</tr>
</table>

<style type="text/css">
<!--
body {margin:0;padding:0;}
td {vertical-align:top;}
table {height:100%;}
td.footer {height:5pt;}
td.footer {margin:0;padding:0;}
-->
</style>

Then with table in place, you can use div's inside, and at same time enforcing footer to stay on bottom of page.

Gasolene
Offline
newbie
Last seen: 17 years 31 weeks ago
Joined: 2004-02-14
Posts: 6
Points: 0

place something on bottom of page

thnx,

actually i found this...

content smaller than view area: http://scott.sauyet.name/CSS/Demo/FooterDemo1.html

content bigger than view area:
http://scott.sauyet.name/CSS/Demo/FooterDemo2.html

This is exactly what I was looking for but thanx for the help.

LinuxGold
Offline
newbie
Last seen: 17 years 4 weeks ago
Joined: 2004-08-18
Posts: 3
Points: 0

place something on bottom of page

At least, you got what you wanted. Smile