Hi,
ich hab hier gerade mal was getippt, das funktionieren sollte. Hab den left-Container und den main-Container noch in einen zusätzlichen Container gepackt und mit dem Attribut "flot:left;" gearbeitet. Ich würde statt dem id-Tag für die DIV-Container lieber das class-Attribut verwenden.
Code:
<!DOCTYPE
HTML>
<
html>
<head>
<link rel="stylesheet" href="layout.css" type="text/css">
</head>
<body>
<div class="header">
Header
</div>
<div class="container">
<div class="navigation">
Navigation<br>
Zeile 2<br>
Zeile 3<br>
Zeile 4<br>
Zeile 5<br>
</div>
<div class="content">
Content<br>
Neue Zeile<br>
Neue Zeile<br>
Neue Zeile<br>
Neue Zeile<br>
Neue Zeile<br>
</div>
</div>
<div class="footer">
Footer
</div>
</body>
</
html>
Code:
body {
background-color: white;
padding:10px;
margin:0px;
}
.header {
padding:4px;
height:64px;
background-color: #CDEBF3;
border: 1px solid #30A7C5;
}
.footer {
padding:4px;
background-color: #F8FD95;
border: 1px solid #E4F004;
}
.navigation {
width:250px;
float:left;
padding:4px;
background-color:#FFC1C2;
border:1px solid #FB0006;
margin:0px;
}
.content {
padding:4px;
background-color:#B3FFB7;
border:1px solid #20FF2C;
margin:0px 0px 0px 268px;
}
.container {
margin:12px 0px;
overflow:hidden;
}
Bei Bedarf kann ich alles noch etwas näher erläutern
mfg,
Patrick
Edit: Hab das ganze gerade mal auf meinen Web-Server hochgeladen:
http://www.patti-k.de/test/layout_dp/. Habs mit Opera 11 und IE 8 getestet, bei beiden schauts korrekt aus. Wie es in den anderen Browsern dargestellt wird, weiß ich nicht.