cruisi: äußeres div soll mit inneren mitwachsen

Beitrag lesen

hallo,
ich habe mal eine frage zur positionierung.
ich habe ein alles umschliessendes div mit einem border. darin befinden sich mehrere weitere divs. wenn in diesen eingeschlossenen divs der inhalt so groß wird, daß die mindesthöhe meiner seite überschritten wird, soll der äußere bereich auch mit wachsen. ich habe schon alles mögliche getestet. es klappt auch fast, aber in firefox umschliesst das äußere div nicht alle inneren divs. im IE allerdings mal wieder schon.
wenn jemand von euch da vielleicht einen tipp hätte, wäre das grandios.
der quelltext kommt sofort.
zuvor noch eine weitere mögliche option: spricht generell etwas gegen absolute positionierung? damit komme ich nämlich besser klar und wäre mein wunschdenken. allerdings bekomme ich das oben genannte problem mit dem mitwandern auch nicht hin. den quellcode zu der absoluten version findet ihr bei interesse hier: www.krusenotto.com/test.zip

und hier der code zu der zuerst genannten version: wie gesagt, im IE ist alles gut, im firefox werden nur ein paar divs eingeschlossen vom äußeren. und ein weiterer wunsch wäre, daß das jetzige div "teaser 1+2" in zwei untereinander liegende divs aufgeteilt wird. das habe ich leider nicht geschaft. ich hoffe, ich bin nicht zu unverschämt bei den vielen fragen.

viele grüße und vielen dank im voraus,
cruisi

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <title></title>
  </head>
  <body style="text-align:center;">
  <div style="border:3px solid black; margin-left:auto; margin-right:auto; margin-bottom:auto; margin-top:30px; width:950px; text-align:left;">
    <div style="border:1px solid red; float:left; height:100px; width:600px;">Logo div</div>
    <div style="border:1px solid green; height:50px; float:left; width:300px;">Topnavi div</div>
    <div style="border:1px solid yellow; height:50px; float:left; width:300px;">Suche div</div>
    <div style="border:1px solid blue; clear:left; height:30px;">mainnavi</div>
    <div style="border:1px solid olive; height:300px; width:200px; float:left;">teaser I + II div</div>
    <div style="border:1px solid aqua; height:300px; width:530px; float:left;">content div</div>
    <div style="border:1px solid purple; height:300px; width:200px;">teaser III div</div>

</div>

</body>
</html>