Ajax - CSS-Elemente verschieben sich nicht, wenn dynamisch Inhalte hinzugefügt werden

[J1M1]

Hallo.

Ich lade zuerst einen Inhalt in "#main #top #content"über Ajax. Wenn dieser Inhalt geschrieben wird, dann verschiebt sich "#main #bottom" wie i möchte nach unten.

#main
{
display: block;
position: relative;
margin-top: -330px;
margin-left: 320px;
}

#main #top
{
display: block;
position: relative;
width: 660px;
height: 450px;
background-image: url(../../images/top.png);
background-repeat: no-repeat;
z-index: 69;
font-family: Candara;
font-size: 70px;
font-weight: bold;
color: #FFFFFF;
padding-top: 15px;
padding-left: 40px;
}

#main #top #content
{
}

#main #bottom
{
display: block;
position: relative;
float: left;
margin-left: 95px;
margin-top: -15px;
width: 567px;
height: 173px;
background-image: url(../../images/bottom.png);
background-repeat: no-repeat;
}

Doch dann möchte ich durch einen Klick auf einen Javascript-Link erneut einen Inhalt per Ajax laden. Wenn dieser Inhalt geschrieben wird, verschiebt sich "#main #bottom" im Firefox nicht mehr nach unten, im IE7 komischerweise schon.
Zu sehen auf http://ajage.funpic.de/html und dann unter Home->Announcements. Beim Klicken auf "Read Comments" sollen die Kommentare geladen werden.

#main #top #content #topic_x
{
position: relative;
float: left;
margin-left: 80px;
width: 450px;
margin-bottom: 30px;
font-family: Times New Roman;
font-size: 14px;
font-weight: normal;
color: #223350; 
}

#main #top #content #topic_x .comments
{
display: block;
position: relative;
margin-top: 5px;
margin-left: 0px;
padding-left: 20px;
font-family: Times New Roman;
font-size: 14px;
font-weight: normal;
color: #223350; 
}

Auch wenn ich ".comments" zu "#comments" ändere verschiebt sich "#main #bottom" nicht.

MfG J!M!

 

[J1M1]

Okay, ein kleiner troubleshoot von mir ergab: #bottom is außerhalb von #top und abhängig von der Höhe von #top; werden die #comments geladen, werden die folgenden div's, die ebenfalls wie #comments _in_ #top sind nach unten verschoben durch "position: relative;" die Höhe von #top allerdings wird dadurch nicht geändert, deswegen verschiebt sich auch #bottom nicht.
warum es klappt wenn ich die Announcements selber lade liegt wohl darin, dass i, wenn die Announcements geladen werden, i direkt in #top schreibe mit getElementbyID('top'), wenn i aber die Comments lade dann schreibe i nur in #comments rein, so dass im Prinzip nicht #top neu geschrieben wird, sondern nur ergänzt wird. Und FF kriegt diese Neuerung iwie nicht mit... -.-
hmmm... jemand ne idee..?