how do i place div in a table and positions Options

[yobe1001]

Hello
i do have a problem with my page.
i created a web page with a long table and in the footer i wanted to add a simple fisheye menu
- but the code is in div- when i enter the div code inside it appear floating in the middle of the page
how can i change that ?
because i don't know very well the code i need your help here.

if i remove the div the applet doesn't work
if i change the div with <span> it doesn't work either

let me show the example

<tr>
<td colspan="5" align="center" >
<div class="dock" id="dock2">
<div class="dock-container2">
<a class="dock-item2" href="#"><span class="txt_table">name</span><img src="images/iconfooter-1.png" alt="" border="0"></a>
<a class="dock-item2" href="#"><span class="txt_table">name</span><img src="images/iconfooter-2.png" alt="" border="0"></a>
<a class="dock-item2" href="#"><span class="txt_table">name</span><img src="images/iconfooter-3.png" alt="" border="0"></a>
<a class="dock-item2" href="#"><span class="txt_table">name</span><img src="images/iconfooter-4.png" alt="" border="0"></a>
<a class="dock-item2" href="#"><span class="txt_table">name</span><img src="images/iconfooter-5.png" alt="" border="0"></a>
<a class="dock-item2" href="#"><span class="txt_table">name</span><img src="images/iconfooter-6.png" alt="" border="0"></a>
</div>
</div>


<script type="text/javascript">

$(document).ready(
function()
{
$('#dock2').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container2',
itemWidth: 60,
proximity: 100,
alignment : 'center',
valign: 'bottom',
halign : 'center'
}
)
}
);
</script>
</td>
</tr>

here is the css code:

#dock2 {
width: 100%;
bottom: 0px;
position: absolute;
left: 0px;
}
.dock-container2 {
position: absolute;
height: 50px;
background: url(images/dock-bg.gif);
padding-left: 20px;
}
a.dock-item2 {
display: block;
font: bold 12px Arial, Helvetica, sans-serif;
width: 40px;
color: #000;
bottom: 0px;
position: absolute;
text-align: center;
text-decoration: none;
}
.dock-item2 span {
display: none;
padding-left: 20px;
}
.dock-item2 img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}

what should i change in this code
so the div will be in the end of the page or at least in the <td> that i put it in

many thanks in advance

[Darin McGrew]

Can you provide the URL (address) of a document that demonstrates the problem?

[yobe1001]

i don't have it on-line but i added a image
how i see it on the page

i hope you can help me

[Frederiek]

No, an image doesn't help much to help you.
But maybe you could put the div outside the table. Doesn't that work?

[yobe1001]

no , it doesn't work
ok - i uploaded it on my site

http://www.yobedesign.com/example/applet.html

many thanks in advance

[Frederiek]

But, you haven't put it outside the table. Try putting it AFTER the closing </table> tag.