Probleme mit der Verschachtelung von div-Layern

Hi all,

ich möchte ein einfaches tabellenfreies Template erstellen, bei dem sich die Contentbox dynamisch dem Inhalt anpasst. Das Template sollte dabei folgendermaßen aufgebaut sein:

+Header+
+Navigation+
+Content in Contentbox verschachtelt (siehe Code)+
+Footer+

Ich habe es auch soweit schon im IE & Opera zum Laufen bekommen. Nur im Firefox hat sich der Content nicht der Contentbox angepasst. Nach vielen erfolglosen Versuchen habe ich nun folgenden Code zusammengebaselt, bei dem zwar der Inhalt in allen Browsern darbestellt wird, aber das Layout ziemlich zerrissen wird:

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: 
75: 
76: 
77: 
78: 
79: 
80: 
81:

<!DOCTYPE html
	PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>

	<title>testseite</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css" media="all">@import "style.css";</style>

</head>

<body bgcolor="#FFFFFF">


        <div id="page-wrapper">
		<div id="container">
			<div id="header">


			<div id="navtop">

                            <a href="Startseite.html">Startseite</a>&nbsp;&#124;&nbsp;<a href="Test1.html">Test1</a>

                        </div>

   			<!-- ----------------------------- -->
	   		<!-- NAVIGATION END                -->
   			<!-- ----------------------------- -->
		        <div id="content_bg">

                             <div id="content">

       			     <p class="bodytext"><img src="fileadmin/template/img/bild.gif" alt="" /><br>
                                    </p>               TEXT
                                    <p class="bodytext"><b>TEXT </b></p><ul>
                                    <li>TEXT </li>
                                    <li>TEXT</li>
                                    <li>TEXT</li>
                                    <li>TEXT</li>
                                    <li>TEXT</li>
                                    <li>TEXT</li>
                                    <li>TEXT</li>
                                    <li>TEXT</li>
                                    <li>TEXT</li>
                                    <li>TEXT</li>
                                    <li>TEXT</li>
                                    <li>TEXT</li>
                                    <li>TEXT</li>
                                    <li>TEXT</li>
                                    <li>TEXT</li>
                                    <li>TEXT</li>
                                    <li>TEXT</li>
                                    <li>TEXT</li>
                                    <li>TEXT</li>
                                    <li>TEXT</li>
                                    <li>TEXT</li>
                                    <li>TEXT</li>
                                    <li>TEXT</li>
                                    <li>TEXT</li>
                                    <li>TEXT</li>
                                    <li>TEXT</li>
                                    <li>TEXT</li>
                                    <li>TEXT</li>
                                    <li>TEXT</li>
                                    <li>TEXT</li>
                                    <li>TEXT</li>
                                    <li>TEXT</li>
                                    </ul>
                                    </div>
                              

                <div id="bottom">

                </div>

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

und hier die passende CSS-Datei:

body {
	text-align: center;
}

body, th, td, select, input {
	font-family: verdana, sans-serif, helvetica;	
	font-size: 12px;
}

#page-wrapper {
	margin: 20px auto 20px auto;
	padding: 0;
	width: 800px;
	text-align: left;
	background: transparent url(img/cont_bg.gif) repeat-y;
}


#container {
	width: 800px;
	height: 100%;
	background: url(img/cont_bg.gif);
	margin: 0px;
	margin-left: 0px;
	margin-right: 0px;
	padding: 0px;
	border: 1px solid #000000;
	text-align: left;
}

#header {
	width: 800px;
	height: 106px;
	margin: 0px;
	margin-left: 0px;
	padding: 0px;
	background: url(img/top.jpg) top left no-repeat;
}


#navtop {
	width: 800px;
	height: 21px;
        background-color: #ffffff;	
        text-align: left;
	padding-top: 3px;
	padding-left: 37px;
	font-size: 12px;
}


#navtop A {
	color: #003366;
	text-decoration: none;
}

#navtop A:hover {
	color: #FF9900;
	text-decoration: underline;
}


#navtop a#nav-cur{
	color:#FF9900;
}



#content_bg {
        margin: 20px auto 20px auto;
	padding: 0px;
	text-align: left;
	width: 100%;
	height: 100%;
	border: 0px;
	#margin: 0px;
	#margin-left: 0px;
	#margin-right: 0px;
	padding: 0px;
}


#content {
	position: relative;
        width: 720px;
       border: 1px solid #000000;
	background-color: #ffffff;
	margin: 20px;
	margin-left: 40px;
	padding: 20px;
}

/*#content {
	margin: 15px 0px 15px 15px;
	/* falsche margin-Werte für alle Versionen des IE Win (inkl. 6.0) */
	padding: 0;
	width: 480px;
	float: left;
}
html>body #content {
	/* korrekte Werte für Browser, die nicht unter den IE-Bugs leiden */
	margin-top: 30px;
	margin-left: 30px;
}
*/

#bottom {
	width: 800px;
	height: 46px;
	border: 0px;
	background: url(img/bottom.jpg);
	margin: 0px;
	margin-left: 0px;
	padding: 0px;
}

#bottom_footer {
	margin: 0px;
	margin-top: 20px;
	margin-bottom: 20px;
        background-color: #ffffff;
	padding: 2px;
	color: #404040;
	font-family: Tahoma, Sans-Serif, Helvetica;
	font-size: 11px;
	text-align: center;
}

Über Hilfestellungen wäre ich sehr dankbar.

Gruß
deviance.