CSS Forum

**Bulevardi** · 11-18-2008, 06:29 AM

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

http://www.bulevardi.be/trouwsite/padding.php

Code:

<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:

Code:

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: http://www.bulevardi.be/trouwsite/padding.css

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

What am I doing wrong?

**chrishirst** · 11-18-2008, 07:07 AM

#content being only 24px high might just have something to do with it.

**Bulevardi** · 11-18-2008, 07:24 AM

This can't be serious...

I'm already trying to fix this for so many hours and it's just that height that I overlooked... stupid me!

I was trying with different positionings, floats, wrapping other containers around it etc... nothing worked.

Thanks mate !
I feel so idiot

**chrishirst** · 11-18-2008, 07:29 AM

If only I could say "I've never done anything like that"