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

[J!M!]

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 Hanrun Hu's Website 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!