Div layer problem

On a layout I'm currently working on I'm trying to get a table at the bottom containing the copyright information at the very bottom of the page. I've been trying it using a div layer, as that's what most of the page is made up of, and this is as close as I can get it and yet it appears about 3/4 down the page instead. Any help in getting the bloody thing down there would be much appreciated, even if it isn't via div layering.

PHP Code:

---

</div>

<div id="foot" style=":bou::bou::bou::bou::bou::bou::bou::bou::bou::bou: absolute; width: 779px; height: 20; left: 0px; top: 100%;">
<table cellspacing=0 cellpadding=0>
<td height="20" width="779" bgcolor=9592AB style="border: 1 solid #2A2A28;">Copyright Information</td>
</table>
</div> 


---

Worked fine when I tested it. It made a purple box that stayed nicely at the bottom of the page. Maybe something else on the page is interfering with this div. I notice youre mixing old-style HTML with CSS. I find it better sometimes to use CSS for all formatting. background-color: instead of bgcolor= for example.

Thank you for your post :). I tried what you said and I edited it to the following:

PHP Code:

---

<div id="foot" style=":bou::bou::bou::bou::bou::bou::bou::bou::bou::bou: absolute; width: 779px; height: 20; left: 0px; bottom: 0%;">
<table cellspacing=0 cellpadding=0>
<td style="border: 1 solid #2A2A28; background-color: #9592AB; width: 779px; height: 20px;">Copyright Information</td>
</table>
</div> 


---

That knudged it down right to the tool-bar. The problem now is that it goes down to the tool-bar but no further, so on a site that needs scrolling down on it sticks at that part. Any idea how to get it right to the very bottom of the scrolling distance?

Maybe you should post the whole HTML file instead of just that part, because the snippet you posted still works perfectly for me even if I scroll.

*uploads*

http://www.citadel-realm.com/blarg/

Just a temporary upload incase it counts as advertising. I could add more random content if your resolution doesn't make it scroll (mine's only 800x600 unfortunatly).

I think I misunderstood the question. I don't know how to make it go by the entire scrolling area when setting a position, rather than just the viewable area of the window. Maybe you could set the position of the copyright div relative to the divs that are above it, instead of absolute to the window. Or make one huge div to contain the entire layout, and put some of them aligned to the top, and the copyright one aligned to the bottom. I don't think absolute positioning is going to work. But I'm no CSS expert unfortunately.

Try replacing 'bottom: 0%' into 'top: 100%', it seems to make a difference in my IE.

Quote:

---

Originally posted by Dr Unne
I think I misunderstood the question. I don't know how to make it go by the entire scrolling area when setting a position, rather than just the viewable area of the window. Maybe you could set the position of the copyright div relative to the divs that are above it, instead of absolute to the window. Or make one huge div to contain the entire layout, and put some of them aligned to the top, and the copyright one aligned to the bottom. I don't think absolute positioning is going to work. But I'm no CSS expert unfortunately.

---

I can give that a try, I'll let you know how it turns out, seeing as that might take me most of the day. o_<

Quote:

---

Originally posted by Master Vivi
Try replacing 'bottom: 0%' into 'top: 100%', it seems to make a difference in my IE.

---

Getting closer, but still no cigar I'm afraid. top: 100% made the bar go directly under the tool-bar, so it's further down than bottom, but still hovering alittle. (updated the file if you want to see).

My original idea was to have a table with one cell having a height of 100%, then the copyright table placed underneath that. The problem being that the 100% height cell will only seem to reach 100% if there's something inside the cell to make it reach that height (like, say, a transparent image that reachers the right amount of pixels). The problem being that every page would need a different sized transparent image depending on the size of the content, and if content was added a new transparent image would be needed and so on, which would obviously make a very inflexible layout.

I just realized that using 'top: 150%' kicks it low enough for it to be at the bottom (tested with Mozilla and IE).

Quote:

---

Originally posted by Master Vivi
I just realized that using 'top: 150%' kicks it low enough for it to be at the bottom (tested with Mozilla and IE).

---

Unfortunatly that only works when the content is 150% the hight of one screen. I just pasted a whole lot of text and the bar stayed at the 150% level. Alas. Thanks anyway. :)

Come to think of it, if worst comes to worst I'll just set a number of pixels and adjust it to the content. Shouldn't be much trouble at all with exception that each footer would have to be part of the page rather than a php include file. Thank you both for your time and effort, it's been much appreciated. :)

EDIT: Well I finally got it working, I put the content, footer and navigation into a seperate table within the div layer, thus the footer goes down with the tables.