media.css
/* Layout */
html, body, p{
margin:0;
padding:0;
}
body{
min-height:101%;
position:relative;
color:#000;
background:#fff;
text-align:left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-decoration: none;
}
#container{
position:absolute;
width:1024px;
left:50%;
margin-left:-512px;
}
#headerbox {
position:relative;
height:215px;
}
#contentbox {
clear:both;
width:auto;
background: #ccc url(faux.png) repeat 50% 0;
}
#headerleft {
float:left;
height:215px;
width:125px;
background-color:#33C021;
}
#headerright{
float:right;
height:215px;
width:149px;
background-color:#33C021;
}
#headermiddle{
width:auto;
height:215px;
margin-left:125px;
margin-right:149px;
background-color:#4EB6C1;
}
#sideleft {
float:left;
width:125px;
z-index:2;
}
#sideright {
float:right;
width:149px;
z-index:3;
}
#content {
width:auto;
margin-left:125px;
margin-right:149px;
z-index:1;
background-color:#D2D2D2;
padding:10px;
}
#ie_clearing{
display:none;
}
#footer {
clear:both;
height:25px;
background-color:#f7f7c6;
}
/* Style */
p{
color:#006633;
margin-bottom:1em;
}
a:link {
font-weight: bold;
text-decoration: underline;
}
a:hover {
color: #008000;
}
index.html
<!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>
<link href="media.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="headerbox">
<div id="headerleft"> </div>
<div id="headerright"> </div>
<div id="headermiddle"> </div>
</div>
<div id="contentbox">
<div id="sideleft"> </div>
<div id="sideright"> </div>
<div id="content"><p> CONTENTtttttttttttttttttttttttttttttttttttttttttttttttttt tttttttttttttttttt ttttttttttttt ttttttttttt ttttttttt t t tttttttttttt tttttttttttttttttttt t ttttttttttttttttttttttt tt ttttttttttt t tt tttttt</p><br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br></div>
<div id="ie_clearing"> </div>
</div>
<div id="footer"> </div>
</div>
</body>
</html>
Dein Problem mit der Lücke lag an p. Erstens du hast p nicht geschlossen mit </p> und zweitens p hatte noch margin-top drin und somit kam diese Lücke zustande! Ich habe das margin von p zurückgesetzt und nur ein maring-bottom übergeben!
Den Seitenabstand im contenbreich machst du mit padding
Achja und ich habe mir mal erlaubt das Layout mittig zu setzen! Indem ich im #container position:absolute; left:50% und left-margin:-512px eingefügt habe! left-margin muss immer die hälfte von der gesamtgröße des Layers haben! 1024 / 2 = 521
Bei weiteren Fragen einfach melden!