Div expansion with multiple JS objects

[cbouchar]

How do I insert one JS object after another and have the containing DIV automatically expand to fit?

Right now, my DIV has this but only one of the inserted objects is appearing. The other, I assume is directly on top of the first.

<div id="center">
<script language="javascript" type="text/javascript" src="page1.js"></script>
<script language="javascript" type="text/javascript" src="page2.js"></script>
</div>

The current CSS for the DIV is as follows:

#center { position: absolute; top: 171px; margin-left: 166px; background:#000000; width: 789px; 
}

Any help would be appreciated.

[hemebond]

Help how? You told us why it's not showing up. You can see from the CSS that one is being placed over the other.

[cbouchar]

My knowledge of CSS is limited.
What I would like help with is getting the second (and eventually third, fouth, fifth etc.) JS object to appear below the first, not directly on top of the first. I would also like the DIV to automatically expand to fit these additional objects.

[harbingerOTV]

<div id="center">
<script language="javascript" type="text/javascript" src="page1.js"></script><br />
<script language="javascript" type="text/javascript" src="page2.js"></script><br />
</div>

or:

<div id="center">
<p><script language="javascript" type="text/javascript" src="page1.js"></script></p>
<p><script language="javascript" type="text/javascript" src="page2.js"></script></p>
</div>

[cbouchar]

I just tried both of those options but nothing changed. I can still only see 1 of the objects drawing.

The JS object is a bunch of HTML that I am loading into a DIV (Thanks HarbingerOTV). The HTML is styled using an external CSS. Perhaps the positioning in the CSS is forcing it to draw at the top of the DIV. Both JS objects are using the same CSS.

Is there a way that the CSS could be modified so that each object is drawn below the previous object rather than at the top of the DIV each time?

If not, what else could I try?

[harbingerOTV]

Well it does work. It's probally a CSS problem with the files your importing with the javascript.

Does the CSS that styles the imported files have position:absolute in it anywhere? If it does change it to position:relative

if that doesn't apply post the CSS and the java files

[cbouchar]

Yes, the CSS was using position:absolute exclusively. When I changed it to relative, both objects were drawn (one after the other) but the elements within them are now all over the place, because of the relative positioning. I will have to change all the positioning values so that everything lines up again.

Thanks for your help