#box and #frame in HTML - how?

Hello,

I'm currently trying to insert the good looking "dialog.htm" into rather complicated html page with a lot of tabs and cells.
The question is:

How do I insert: var box = new AW.HTML.DIV; and var frame = new AW.HTML.DIV; object in <TD> tag?

I sued:
document.getElementById("grid2").innerHTML=box.toString();
document.getElementById("grid2").innerHTML=frame.toString();

but then it gives me only Frame obejct displayed. Box is disspaering.
So I guess in case with several objects - one CAN NOT use obj.toString(); coz then you will only get the last object displayed.
So, what one can do?...

And anther one question:

#box and #frame CSS using position: absolute;
this is not going to work if you want to put it inside of f.ex <TD> tag.
How can I then put "box" and "frame" and all the rest inside of <TD>?.....

Any suggestions are appreciated!

Paul,

you can try:

document.getElementById("grid2").innerHTML=box+frame;

or

var content = [box, frame, ...];

document.getElementById("grid2").innerHTML=content.join("");

Thanx, Alex
document.getElementById("grid2").innerHTML=box+frame+container;
works just as it should :)
easy, ha..

What about CSS? Could anyone pls share an example on how to implement nicely looking "dialog.htm" into <TD>?

In my case, if I include : position: absolute;
then it goes beyond <td> which is no good at all.
If I remove position: absolute; then BOX object goes first, and then FRAME object goes next to it below, but they are not sticking together...

Put the dialog parts into a DIV that has a position=relavtive and then put the DIV into the TD. THe dialog should then align itself to the DIV and not the page.

It does not help me...maybe I'm doing something wrong?
The box and the frame are still go one after another below.

#box {left: 0px; top: 400px; width: 398px; height: 432px; border: 1px solid #000000; background: #ece9d8; position: absolute;}
#frame {left: 6px; top: 408px; width: 386px; height: 402px; border: 1px solid #000000; background: #f9f8f4; position: absolute;}

<table border="1">
<tr><td width="800" align="right">2 Grid</td></tr>
<tr><td width="800" align="right">
<div style="position=relavtive;" id="grid2">
</div>
</td></tr>
</table>
<script>
var box = new AW.HTML.DIV;
box.setId("box");

var frame = new AW.HTML.DIV;
frame.setId("frame");

var container = new AW.HTML.SPAN;
document.getElementById("grid2").innerHTML=box+frame+container;
</script>

Can anyone help me please?

sorry, I think the problems was with: position=relavtive
misspelling. It's seems working now...