[CSS] Neues Problem: MainTeil falsch gecodet?

Kidekat
Hallo zusammen!
Ich habe folgendes Problem:
Ich habe ein sehr hilfreiches Tutorial zum Coden eines Divs Layout gefunden und dort wird mit einer externen css-Datei gearbeitet.
Wenn ich sie jetzt aber in meine HTML-Seite des Layouts einbinden möchte und dann die gewünschte Seite aufrufe, sind weder Main noch Menü an der richtigen Stelle und was mich noch mehr ärgert: Das Hintergundbild - also das Layout wird gar nicht erst angezeigt.

Zugegeben ich bin schon ziemlich lange raus aus dem ganzen zeug mit HTML und CSS. Das letzte Mal hab ich glaub ich vor anderthalb Jahren was gecodet, zusätzlich ist es mein erstes DIV-Layout, was ich versuche zu coden.

Hier einmal der HTML-Code:

code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN> 
<html>
<head>
<title>Beispiel-Layout</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<!--LAYOUT-->
<div id="layout">

<!---CONTENT-->
<div id="content">
INHALT
</div>

<!---NAVIGATION-->
<div id="navigation">
NAVIGATION
</div>


</body></div>
</html> 


Und hier der CSS-Code:

code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
body {
overflow-x:hidden; 
background-image:url('herbstlayoutKopieunten.jpg'); 
font-family:Tahoma; 
font-size: 10pt; } 

#layout {

margin-top: 0px; 
margin-left: 0px;
width: 1262px; 
height: 835px; 
position: absolute;
background:url('herbstlayoutKopie.jpg') no-repeat; }

#content {
width: 866px;
margin-top: 395px; 
margin-left: 195px;
position: absolute;
}

#navigation {
width: 895px;
margin-top: 346px;
margin-left: 183px;
position: absolute;
} 

h2 {
font-size: 12pt; 
font-color: #E1C4A6;
line-height: 20px; 
text-align: center; 
font-family: Tahoma;
letter-spacing: 5px; 
text-transform: uppercase; 
} 

a:link {color: #E1C4A6; text-decoration: none;} 
a:visited {color: #E1C4A6; text-decoration: none;} 
a:hover {color: #FFFFFF; text-decoration: none;} 


Wahrscheinlich habe ich nur etwas entscheidenes vergessen, ich kenn mein Glück doch ;D

Achso, hier noch ein Screen: Weiß!
Pami
edit: doch nicht ^^ sry hab gedacht ich wüsste warum...
Kidekat
Kein Problem!
Den Fehler mit den Bildern hab ich behoben, einfach falsch verlinkt.
Allerdings stimmt etwas mit meinem MainTeil nicht, plötzlich wird der beendet.
Hab ich das falsch verstanden, als es hieß kein Height angeben?
Eigentlich ergänzen sich DIV Layouts doch so weit wie sie sich erweitern müssen - also hat man doch gar keine feste Höhe des MainTeils.

Hier nchmal ein Screen

Klick
Kidekat
Hab ich versucht, klappt allerdings auch nicht.
Trotzdem danke für den Tipp!
Es muss etwas am kompletten Code bzw am Design nicht stimmen, weil wenn ich eine Zahl eingebe, z.B 800 Px ist der Content auch nicht größer als auf dem vorherigen Screen! ):
Kidekat
beies gemacht, nichts verändert.
Trotzdem danke (;

Edit:
Hier nochmal der aktuelle Content-Teil!

code:
1:
2:
3:
4:
5:
6:
<!--CONTENT-->
<div id="content">
<iframe src="herbsthome.html" name="frame" width="895" frameborder=0 scrolling="no" noresize style="border: 0px" style="FILTER: chroma (color=#ffffff)" ;>
  </iframe>
</div>
Kidekat
Weiß keiner, was los ist? ):
Kidekat
Okay, ich hab den Thread vergessen, weil ich viel zu tun hatte, aber jetzt hab ich wieder Zeit.
Also ich habe jetzt nur noresize rausgenommen und auf auto gstellt, aber geändert hat sich nichts. Wie würdest du den Mainteil denn reinbringen? Daraus bin ich nämlich nicht ganz schlau geworden ;D