Denk dat ik het werkende heb:
test.html
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>...MPOLO || THE BEST..</title>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="content">
<div id="img1">groen: Img1 --> header</div>
<div id="middle">
<div id="img2">blauw: Img2 --> menu</div>
<div id="img3">rood: Img3 --> main</div>
</div>
<div id="img8">geel: Img8 --> footer</div>
</div>
</div>
</body>
</html>
test.css
Code:
@charset "utf-8";
/* CSS Document */
#container{
width:100%;
height:100%;
}
#container #content{
margin:0 auto;
width:960px;
}
#container #content #img1{
background-color:#00FF00;
width:960px;
height:100px;
}
#container #content #img2{
background-color:#0000FF;
width:200px;
height:200px;
float:left;
}
#container #content #img3{
background-color:#FF0000;
width:660px;
min-height:800px;
float:left;
}
#container #content #img8{
background-color:#FFFF00;
width:960px;
height:150px;
}
#container #content #middle{
background-color:#666666;
width:960px;
/*maak voor hier een background image van 1px hoog en repeat deze de ander afbeeldingen komen over deze heen dus zullen onzichtbaar zijn*/
}
Het speciale wat ik hier dus gebruik is dat ik wat jij wil dat de border word eigenlijk als achtergrond zet in een achtergelegen div.
Waarover ik dan je menubalk en maincontent achtergrond heen plaats.
Zolang je een vaste breedte hebt zou het zeker moeten werken.
Let wel op: dat je width's van de inhoud niet over de width van de container gaat!
Hoop dat dit is wat je zocht, laat iets weten als het werkt
