Positionierung

[Julian Hofmann]

Hallo.

Irgendwie verzweifle ich langsam. Da soll man verschachtelte Tabellen immer mehr vermeiden, so richtig gelingt es mir aber nicht das ganze mit divs hinzubekommen.

Angenommen ich habe folgenden Code:
<div id="content"><img src="images/blau.jpg" width="145" height="444">
  <div id="headline"><h1>Testseite</h1></div>
  <div id="text">Lorem ipsum dolor sit amet...</div>
  <div id="navigation"> <a href="index.php" class="navi">Home</a></div>
</div>

...und die Darstellung sollte etwa wie folgt aussehen (horizontal in der Mitte des Bildschirms, ideal wäre sogar komplett mittig):

-content-------------------------------
   |             |  headline             |
   |             |-----------------------|
   |  blau.jpg   |  text                 |
   |             |                       |
   |             |-----------------------|
   |             |  navigation           |
   ---------------------------------------

Wie müsste ich da bitte die Angaben in CSS setzen?

Habe zur Zeit:
#content {
 width: 600px;
 padding: 0px;
 margin-top: 20px;
 margin-bottom: 20px;
 margin-right: auto;
 margin-left: auto;
 text-align:left;
 height : 444px;
}

#headline {
 position : absolute;
 width : 400px;
 height : 100px;
 margin-left : 170px;
 margin-top : 100px;
}

#text {
 position : absolute;
 width : 400px;
 height : 200px;
 margin-left : 170px;
 margin-top : 200px;
}

#navigation {
 position : absolute;
 width : 400px;
 height : 20px;
 margin-left : 170px;
 margin-top : 400px;
}

Oder gibt's irgendwo noch Seiten, auf den das gut erklärt wird? SelfHTML hat mich da nicht all zu sehr weitergebracht.
Oder weiß einer eine Seite, wo ich etwas im Quellcode rumschnüffeln könnte?

Vielen Dank im voraus.
Grüße aus Würzburg
Julian