CSS Positioning a table in a tabl

[Satal Keto]

I am creating a dynamic website which has tables within a table.
What I am trying to do is position the inner tables to the top of the cells in the containing table.
The CSS I am using to try and position the inner tables is
div.box {top:0px; left:0px; position:relative;}
And the code I am using for the inner tables is
<div class='box'><table width='90%' border='1'><tr>
<td background='images/boxtitle.gif'><div align='right'>Test 1 [<span onClick='switchMenu("_1")'>+</span>] </div></td>
</tr><tr><td bgcolor='#161616'><div align='center' id='_1'>Content<br>Goes in here</div></td></tr></table>
Although I would have expected for the tables to be at the top they are remaining in the middle
(as shown in this screen pic)
http://img243.imageshack.us/img243/9227/untitledhe0.th.jpg (http://img243.imageshack.us/my.php?image=untitledhe0.jpg)

Does anyone have any idea what I am doing wrong as I can't seem to figure this out and its really bugging me.

Thanks for any help in advance
Satal Keto

[ahallicks]

Question... why do you need to use tables for your layout? Why not have a strictly CSS layout and make your site more semantic? You use the div's in the correct way... take out the table elements and use div id's for you separate sections.

For some help and a tutorial on how to do this here to http://bonrouge.com/~guide

[Satal Keto]

ok we will go with what you are saying but now I can't get borders and its still in the middle of the table (as I have only replaced the inner tables)
CSS Code
.boxhead {top:0px; position:relative; background-image:url(images/boxtitle.gif); border:2px #FFFFFF; width:90%}
HTML Code
<div class='boxhead'>Hello</div>

[ahallicks]

border:2px solid #FFFFFF;

Also take out position: relative; and the top: 0px; and put float: left in

[Satal Keto]

But
float: left;
moves it over to the left surely?
I want to position it at the top. Hence the
top: 0px;
but that doesn't work
The borders work beautifully though :D

[db2six9]

But
float: left;
moves it over to the left surely?
I want to position it at the top. Hence the
top: 0px;

The float will place the div on the left (or right if desired) but then you will position it using the margin. There is a thread that taught me all to be known about the use of divs, centering them and nesting them,

http://codingforums.com/showthread.php?t=107067

Div's are much more dynamic than tables and the content within them will behave rationally and intuitively which cannot always be said for tables. Follow the above thread and check out the referred script as you go, you will learn a lot and should be able to find the solution to your problem.

[Satal Keto]

I managed to get it working :D
re-did the entire website using SPAN and DIV tags
Looks beautiful in IE
But firefox doesn't appear to like it :'(
So now to work on getting Firefox to like it (and hopefully it will still work in IE)