Ich möchte eine Webseite im 5 Bereiche aufteilen (oben, Menü, linke und rechte Leiste, zwischen den Leisten der Content-Bereich:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titel</title>
<style type="text/css">
body {
margin:0;
}
#top {
postion:absolute;
top:0px;
left:0px;
width:100%;
height:40px;
background-color:blue;
}
#menu {
position:absolute;
height:20px;
top:40px;
left:0px;
width:100%;
text-align:left;
background-color:yellow;
padding:0px 0px 0px 0px;
}
#left {
position:absolute;
top:60px;
width:50px;
height:150px;
left:0px;
background-color:green;
}
#right {
position:absolute;
top:60px;
width:50px;
height:150px;
right:0px;
background-color:green;
}
#content {
position:absolute;
left:0px;
top:60px;
margin-left:50px;
margin-right:50px;
padding:0px;
background-color:gray;
z-index:0;
color:#000;
}
</style>
</head>
<body>
<div id="top">top</div>
<div id="menu">menu</div>
<div id="left">left</div>
<div id="right">right</div>
<div id="content">
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
</div>
</body>
</html>
Beim Firefox funktioniert es einwandfrei, beim IE jedoch überschneiden sich der Content-Bereich und die rechte Leiste. Das angehängte Bild zeigt es deutlich. Ich hab's auch schon mit padding statt margin probiert, auch da taucht dasselbe Problem auf.
Kann mir jemand weiter helfen?
mit freundlichen Grüßen
Egon Schmid