Difficulty with 1 div in CSS layout

Question

Hi there.
I'm having trouble getting this 100% right.
http://www.josua.co.za/Templates/josua-default.dwt.php
My general layout as well as the 3 images I use as part of my header works 100%. BUT, my content does not work. The moment I add this:
position: absolute;
top: 145px;
my footer falls away or it appears at the top of my page.
I know this is only some minor adjustment but for the life of me, I cannot fix it.
Please help me out.
Sincere regards,
Deon

Answer 1

DeonH wrote:
Hi there.
Sorry, the telephone rang when I was writing the post and forgot to tell the rest of the story.
Yes, when I add it to the content DIV the footer falls of.
Here is an extract form my css file regarding this question:
.oneColFixCtrHdr #container {
width: 970px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
.oneColFixCtrHdr #header {
position: relative;
top: 30px;
left: 0px;
width: 970px;
z-index: 1;
height: 110px;
background-image: url(../graphics/josua-banner1-pix.jpg);
background-repeat: repeat-y;
#headertext {
position: absolute;
top: 35px;
right: 20px;
z-index: 2;
#headerlogo {
position: absolute;
top: 8px;
left: 40px;
z-index: 3;
What do I need to do to fix this? (I know my CSS is probably very cluttered. )
Regards,
Deon
What do you need to do to fix it? Stop using Absolutely Positioned <divs>. Once you make them absolutely positioned it removes them from the natural flow of the html, they act like they don't exist. Therefore the footer jumps up to consume the next available space in the natural html flow.