Hey guys

I've been trying to put a div at the bottom of my page, OVER THE existing elements. for example :

when document is finishing :



so that this div be placed over the bottom of the page (whatever the height of the pge is).
It put my div upper from where it must be, but it still shows a gap under the page in the real place of the div (where it is without the relative position, works fine in FF, the gap is in IE and opera 9.0)

So I have the div place right, but a gap also. How to remove this gap ?

I tried this also :


But not even close.

How should I solve this?
Thanks

Try this.



Put the DIV last in the HTML.

I did, also I added a border to the div so that to see where it is exactly.

I don't think I made myself clear, This is your code look like : (with margin-top)

Click to view attachment

I want it to be like this :

Click to view attachment


the div ends with other page contents, but be over them.

Yes, you did. I typed sloppily.

It should be a negative margin.

yea got it working

Thank you very much

Another thing. relate to this.

I have a td like this :




now i'd like to put a div in this td that this div stick at this td bottom.
is it possible?

for example :


unfortunately valign of the td must be "top" . So is there a way I force that div to stick at td bottom?

It's tricky, I think. 2 questions. Does it need to be a table? If it does, is that TD in the bottom row? Does the DIV need to be in the TD (in the HTML)? OK, that was 3 questions.

What one could do if it wasn't a table, is to position the DIV at the bottom of its container and add bottom padding to make other content go free from the positioned DIV. But... somewhere in the spec it says this:

"The effect of 'position:relative' on table-row-group, table-header-
group, table-footer-group, table-row, table-column-group, table-
column, table-cell, and table-caption elements is undefined."

And to position (absolute) a block relative its parent, the parent must be positioned.

If the TD is in the last row and where the DIV is in the HTML structure isn't important, you could put the DIV below the table and then move it up with a negative top margin or position relative.

This seems to work best for me.
but there's a big problem in my way.

the original table has 1 row and 3 TDs.
I want to place this div in the first TD. (or in the last TD too).

now the first TD width is 14%. middle is 76%.
so with the thing you said, I can place it under the table.

the thing now is, sometime a content is placed in the first TD (like a long word) that it forces the TD to become more than 14%.
now if this happens ,I need to tell my div to be forced like that TD too, which I don't know how :/

the reason I needed to place it in the TD was this. so that it moves exactly as TD width changes ...

Then it must be in the TD, otherwise it's hard to make it the same size. Wait, it just dawned on me that I maybe wasn't thinking right before. Let me try something.

Nah. It was no good. Does it really need to be a table? If it's a layout table - ditch it.

I tried 2 things, but both had a problem.

first :
I added another row at the bottom of the table. with the negative margin-top i learned from you , I tried to make this row (TR) go up, so that the bottom TD be placed over its upper TD (the one we wanted to put the div earlier in).
something like :


It worked in IE6. it saved the TD size, and just moved it to top.
but FF2 it reset the size and they the moved row was nothing like the upper row.

second:
I used rowspan for the table middle TD. rowspan="2".
and placed a TD under the first TD. it worked in FF2 and in IE6.
but as the bottom td must stick to the content of upper td, when the content of the page is expandin the page by height, the 2 TDs height become different in different brwosers.
If I adjust a height to the bottom TD so that it won't change by page height expanding, it works in FF. but IE won't accept that it hold a td height fix and just expand the other.

Does it need to be a table?

Sorry I didn't answer that sooner

it is layout , page template. but as it is working very fine, I'd rather to keep it.

if you wanna talk me out of the table, better show me some code

Told you how to do it already. Why don't you just try it?