Footer always coming up

Problem: the footer always comes up, and the text from the content is always through/over the footer.

<snip>


<body>
 
<div id="container">
 
<div id="header_foto"></div>
 
<div id="header">
 
<ul id="nav">
<li><a href="#">disabled</a></li>
<li><a href="#">disabled</a></li>
<li><a href="#">disabled</a></li>
<li><a href="#">disabled</a></li>
<li id="nav_datum">datum 2009</li>
</ul>
 
</div>
 
<div id="topimg"></div>
 
<div id="content">
 
<h1>Lorem ipsum dolor sit amet!</h1>
<h3>The standard Lorem Ipsum passage, used since the 1500s</h3>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<h3>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</h3>
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
 
</div>
<div id="footer">
 
Here comes the footer
 
</div>
</div>
 
</body>

Css:


body {
 margin-top: 20px; margin-bottom: 40px;
 background-color: #FFFFFF;
 background-image:url("../trouwsite/images/stripe.jpg"); background-repeat: repeat; background-attachment: fixed; background-position: top center; 
 text-align: center;
 font-family: Arial; color: #000000; font-size: 3mm; 
}
 
div#container {
 width: 800px;
 margin: 0 auto;
 text-align: left;
 border: 1px dashed #CCCCCC;
}
 
div#header_foto {
 height: 170px; width: 760px;
 padding: 0 20px 0 20px; margin: 0px;
 background-image:url("../trouwsite/images/headers/headertest.jpg"); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; 
}
 
div#header {
 position: relative;
 height: 24px; width: 760px;
 padding: 0 20px 0 20px; margin: 0px;
 background-color: #CCCCCC;
 background-image:url("../trouwsite/images/datum.jpg"); background-repeat: no-repeat; background-attachment: scroll; background-position: center right; 
}
 
 
div#topimg {
 height: 20px; width: 760px;
 padding: 0 20px 0 20px; margin: 0px;
 background-image:url("../trouwsite/images/contentbackground.jpg"); background-repeat: no-repeat; background-attachment: scroll; background-position: top right; 
}
 
div#content {
 background-color: #CCCCCC;
 height: 24px; width: 760px;
 padding: 0 20px 0 20px; margin: 0px;
 background-image:url("../trouwsite/images/rechts.jpg"); background-repeat: repeat-y; background-attachment: scroll; background-position: top right; 
 text-align: left;
}
 
 
div#footer {
 margin: 0px;
 width: 800px; height: 50px;
 padding: 20px 0 0 0;
 background-color: #FFFFFF;
 background-image:url("../trouwsite/images/footer.jpg"); background-repeat: no-repeat; background-attachment: scroll; background-position: top center; 
 text-align: center;
}

full css right here: <snip>

Problem: the footer always goes up, and the text from the content is always through/over the footer.
The footer should stay in the container, but under the content.

What am I doing wrong?

[edited by: swa66 at 12:36 pm (utc) on Nov. 18, 2008]
[edit reason] No personal URLs, see forum charter [/edit]

Footer always coming up

Dikkie

Dikkie

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week