Issue with #footer container showing up on top of #main container 1

[Evil8]

I have all my pages designed and done, but one page with sales people has more content than can be shown on the screen at one time forcing the user to scroll down. My #footer shows up at the bottom of the window and when the user scrolls up the #footer content scrolls up with the page content behind and underneath. How can I force the #footer to show under the #main container?

CSS:

/* everything is inside the wrap container */
#wrap{
width:800px;
margin:0 auto;
background:#FFFFFF;
}

#header{
height:81px;
min-width:753px;
overflow:hidden;
text-align:center;
background:#FFFFFF url(../PNGfiles/compass.png) center no-repeat;
}

#nav{
height:15px;
width:100%;
text-align:center;
min-width:753px;
border-bottom:#039 solid;
border-bottom-width:9px;
}

#main{
position:relative;
display:block;
top:5px;
left:0;
width:753px;
padding:0;
text-align: left;
}

#footer{
position:absolute;
bottom:-3px;
width:100%;
height:40px;
border-top:#ADADAD 1px dashed;
text-align:center;
padding:3px;
font-size:8pt;
background:#FFFFFF;
left: 2px;
}


Thanks!

 

[vacunita]

Absolute positioning removes the element from the document flow and well positions it were you tell it, so it will always be there regardless of anything else.

Remove the position:absolute from it, so it follows the natural flow of the document and sits at the end of it after all the content.

If this interferes with other pages because they have less content and the footer gets pushed up, you'll need to specify CSS for that specific page. There are other ways to do it, but its simpler to get specify a class its only once page that suffers.


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[Evil8]

Thanks! I did that and it works better for all the pages except the index page which uses two columns. I had to do a little tweaking and go back to the absolute positioning to make that page work correctly. So yeah, I ended up with two footer containers in the end anyway.

 

[vacunita]

Glad you worked it out.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech