Div positioning inside a table

I have a website, and I want to add a picture up in the top right corner (well 100 margin from the top and 开发者_运维技巧right).

I have all my content inside a table (I already know this is bad).

Here is the question: How can I position a DIV at exact the place I want, and without the table taking up the "gap" of the DIV.

For instance, if I have a table, and I place a DIV inside it and position it relatively, the amount of space the DIV "WOULD" have taken up is still taken up in the table column. Why?

How can I fix this?

Absolute positioning outside the table?

The table align is set to center, so I think absolute positioning wouldn't work outside the table...

Thanks

---

Try setting the table cell to position:relative;, then you can have the div as position:absolute; with the left and top as they were before.

Although, last time I tried this Firefox didn't like it, and I had to put a <div> inside the table cell first and have THAT as the relative-position block.

---

I wont get into the fact that you should probably recode your page...

Put the div outside the table so that body is the divs parent. Then when you absolutely position it it will be positioned relative to the body...

#id_of_div { position:absolute; top: 100px; right: 100px; }

---

Getting rid of that gap may not be possible. You can't control the positioning of cell elements besides the basic css for tables that is available: http://w3schools.com/TAGS/tag_td.asp

Can you convert the area to use a table-less design? I'm sure you can get plenty of help on how to do it on here :-)