[HTML] Div verlängert sich nicht

Morgan Girl
Ach man, die div-lays hassen mich. da will man einen frame in den footer legen und schon funktioniert nichts mehr. naja nicht nichts, aber es verlängert sich halt nicht. und ich weiß nciht wieso :'(

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:
<head> 
<title>Titel</title>

<style type="text/css">
 html, body { 
 margin: 0; padding: 0; 
 }
 .content { 
 width: 700px;
 position: absolute;
 left: 170px;
 top: 280px;
 align: center;
 z-index: 3;
 border: 0px;
 }
</style> 

</head>

<body leftmargin="0" topmargin="0" style="background-image:url(Holzpattern.jpg);">

<div style="left: 0px; top: 0px; background-image: url(Div-Hintergrund.jpg); background-repeat: repeat-y; z-index: 1;">
  <div style="left: 0px; top: 0px; position: relative; z-index: 2;"><img src="Header.jpg"></div>
  <div class="content">HIER STEHT TEXT</div>
</div>

<div style="position: absolute; z-index: 1; clear: both;"><img src="Footer.jpg">
   <div style="position: absolute; left: 395px; top: 180px;">
	<iframe allowtransparency="true" name="Menue" src="Menue.php" scrolling="no" height="200" width="250" frameborder="no"></iframe>
   </div>
</div>

</body> 
</html>


das wär sooooo toll, wen das jemand durchschauen könnte (: ich weiß der code ist lang großes Grinsen (für mich zwar nicht, aber zum drüberschauen schon)

bitte bitte helft mir (:
Morgan Girl
height: auto macht er nicht.
und mit dem position hab ich schon rumprobiert.

@mordred: klick
ist ein anderes design, aber das is ja im prinzip wurscht. wie man sieht, verlängert sich der hintergrund nicht. diese pinken streifen, in denen category steht, ist das menü. das sollte eigentlich unter dem text stehen.
Stelo
Ich hoffe, dass das weiterhilft:
http://www.webtoolkit.info/css-clearfix.html
Morgan Girl
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:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
<head> 
<title>Titel</title>

<style type="text/css">
 html, body { 
 margin: 0; padding: 0; 
 }
 .content { 
position: relative;
 width: 700px;
 left: 170px;
 top: 280px;
 align: center;
 border: 1px #FFFFFF solid;
 }

 .header { 
position: relative;
left: 0px;
top: 0px;
background-image: url(Header.png);
background-repeat: no-repeat;
 border: 1px #FFFFFF solid;
}

 .background { 
left: 0px;
top: 0px;
background-image: url(BG.png);
background-repeat: repeat-y;
 border: 1px #FFFFFF solid;
}

 .footer { 
position: relative;
left: 0px;
clear: both;
 border: 1px #FFFFFF solid;
}
</style> 

</head>

<body leftmargin="0" topmargin="0" style="background-image:url(HG.jpg);">

<div class="background">
  <div class="header">
  <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus auctor est, et ultrices arcu viverra sed. Nunc eget eleifend leo. Aliquam erat volutpat. Suspendisse imperdiet, neque auctor ornare pulvinar, sem ante posuere velit, nec rhoncus eros enim aliquet tortor. Nulla pellentesque dui a elit dictum imperdiet. Morbi porta mauris non turpis facilisis auctor. Suspendisse semper scelerisque metus, eu auctor massa porttitor et. Nunc luctus posuere orci a pellentesque. Ut semper metus at elit feugiat porttitor. Nulla congue velit fringilla nibh tristique cursus. Quisque et dolor arcu, sed vestibulum ligula. Nullam interdum odio in tortor porttitor viverra. Vestibulum eros purus, ultrices nec pellentesque ac, tincidunt et mauris. Nullam condimentum nisl eget augue feugiat ut consectetur dui pretium. Etiam ullamcorper faucibus luctus. Maecenas suscipit semper orci, nec bibendum urna hendrerit eu. Fusce ultrices felis eu nibh varius pretium. Praesent sit amet odio quam. 

Phasellus ultricies, mi in vulputate sollicitudin, eros sem blandit dolor, auctor aliquet tellus tortor in orci. In hac habitasse platea dictumst. Sed blandit faucibus est eu vehicula. Ut ornare porttitor lectus, nec fermentum ipsum mollis in. Morbi vel justo quam, at hendrerit massa. Sed risus felis, laoreet ut condimentum sed, convallis et dolor. Morbi facilisis, libero interdum tempus adipiscing, nulla dolor faucibus sem, sed molestie libero enim et velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a est libero. Pellentesque dictum, tellus sit amet mollis tempus, sem sapien mollis nulla, a tempus velit turpis nec purus. Morbi vitae elit non enim commodo porttitor. Proin blandit ligula non tortor ullamcorper nec vulputate mi mollis. Cras congue imperdiet erat, et luctus orci ultrices ac. Aliquam elementum elit vitae enim pulvinar non blandit massa ullamcorper. 

Aenean massa nibh, scelerisque a cursus lobortis, varius non neque. Proin sollicitudin, metus sit amet tincidunt malesuada, lorem diam eleifend erat, sit amet bibendum urna enim at mauris. In vitae volutpat purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam eget fermentum purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ligula eros, sagittis et suscipit ut, lobortis eu lorem. Nullam malesuada nisi vel orci ultricies pharetra. Ut dui massa, porttitor eu viverra et, porttitor porta risus. Ut placerat nunc non ipsum congue sed egestas ligula placerat. 

Nunc euismod imperdiet erat at vulputate. Morbi mattis sem orci, et consectetur nibh. Vestibulum eleifend viverra turpis at cursus. Vestibulum a enim erat. Cras rutrum eros a mauris fermentum quis luctus enim tempus. Etiam consequat scelerisque rhoncus. Nullam massa lacus, tempor ac aliquam ac, posuere sit amet leo. Duis commodo semper varius. Proin sagittis tristique sodales. Nullam diam felis, aliquet sed fermentum sit amet, volutpat ac velit. Praesent ac risus nec lacus rutrum laoreet ac ut ligula. 

Cras tempor viverra augue nec scelerisque. Phasellus ultricies blandit pharetra. Nam ornare, enim at sollicitudin blandit, est enim vehicula libero, eu semper orci libero malesuada libero. Sed hendrerit, diam viverra posuere porta, sem enim elementum metus, tincidunt tincidunt metus ante vitae ante. Vestibulum ut libero mauris, feugiat rutrum eros. Aenean consectetur tellus ultrices ante porta et convallis massa placerat. Suspendisse potenti. Vestibulum laoreet ornare mi, ut adipiscing lectus ullamcorper sit amet. Nunc tellus magna, ornare in laoreet a, fermentum a magna. Maecenas sollicitudin diam vel libero viverra quis semper urna faucibus. Aliquam porttitor tincidunt varius. Donec vitae malesuada risus. Cras quis leo et odio malesuada varius vel sed lorem. Suspendisse vitae congue justo. Suspendisse potenti. Nam commodo convallis erat. 

Donec ante massa, ullamcorper in semper sit amet, vehicula tincidunt felis. Phasellus sed purus at erat congue pharetra. Nulla ornare aliquam sapien, non aliquam urna scelerisque et. Nullam tempor tellus eu magna auctor varius. Vestibulum sapien enim, scelerisque sit amet faucibus in, rutrum quis nulla. Nam et blandit turpis. Donec varius dapibus posuere. Praesent tristique blandit est id ornare. Aenean sodales nisi ultrices dui tempus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 


</div>
</div>
</div>


<div class="footer"><img src="Footer.png">
   <div style="position: relative; left: 395px; top: 0px;">
	<iframe allowtransparency="true" name="Menue" src="menu.htm" scrolling="no" height="200" width="250" frameborder="no"></iframe>
   </div>
</div>
</body> 
</html>


ich bin am verzweifeln. den teil mit de rhintergrundgrafik hab ich nciht ganz verstanden, aber ich hab alle absolutes entfernt.
ich bin dumm großes Grinsen
helft mir großes Grinsen

klick