Ik heb in mijn html document 3 wrappers, deze floating allemaal.
Maar ook buiten de wrappers floaten de elementen, dit is niet de bedoeling en ik kan de fout niet vinden.
NOTE: Het werkt met xhtml en css.
Html document:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Home</title>
<style type="text/css">
body
{
margin: 0px;
background-color: #a7ccff;
}
#container
{
position: relative;
margin: 0 auto;
margin-top: 15px;
width: 800px;
height: 580px;
border: solid 1px;
background-color: #ffffff;
}
#header
{
position: relative;
margin: 0 auto;
width: 800px;
height: 125px;
border-bottom: solid 1px;
}
.pagetitle
{
position: relative;
margin: 0 auto;
height: 20px;
width: 800px;
border-bottom: solid 1px;
}
#spacing
{
height: 20px;
}
#firstw
{
height: 700px;
width: 200px;
float: left;
}
#navbar
{
width: 200px;
height: 175px;
border: solid 1px;
border-left: solid 0px;
margin-bottom: 20px;
}
#navheader
{
width: 200px;
height: 20px;
border-bottom: solid 1px;
text-align: center;
}
#mpanel
{
width: 200px;
height: 175px;
border: solid 1px;
border-left: solid 0px;
margin-bottom: 20px;
}
#mheader
{
width: 200px;
height: 20px;
border-bottom: solid 1px;
text-align: center;
}
#secondw
{
float: left;
width: 300px;
height: 700px;
}
#news
{
height: 372px;
border: solid 1px;
margin-left: 35px;
width: 325px;
float:left;
}
#newsheader
{
height: 20px;
border-bottom: solid 1px;
text-align: center;
float: none;
}
#thirdw
{
float: right;
width: 200px;
height: 700px;
}
#statistics
{
width: 200px;
height: 175px;
border: solid 1px;
border-right: solid 0px;
margin-bottom: 20px;
}
#statheader
{
width: 200px;
height: 20px;
border-bottom: solid 1px;
text-align: center;
}
#ads
{
width: 200px;
height: 175px;
border: solid 1px;
border-right: solid 0px;
}
#adheader
{
width: 200px;
height: 20px;
border-bottom: solid 1px;
text-align: center;
}
#creditbar
{
width: 800px;
height: 20px;
border-top: solid 1px;
}
</style>
</head>
<body>
<div id="container">
<div class="pagetitle">
</div>
<div id="header">
</div>
<div class="pagetitle">
</div>
<div id="collapse">
<div id="spacing">
</div>
<div id="firstw">
<div id="navbar">
<div id="navheader">
Navigation
</div>
</div>
<div id="mpanel">
<div id="mheader">
Member panel
</div>
</div>
</div>
<div id="secondw">
<div id="news">
<div id="newsheader">
News
</div>
</div>
</div>
<div id="thirdw">
<div id="statistics">
<div id="statheader">
Stats
</div>
</div>
<div id="ads">
<div id="adheader">
ads
</di>
</div>
</div>
<div id="creditbar">
Credits to Gerritjan
</div>
</div>
</div>
</body>
</html>
