Div content flowing under footer

[romeoa]

I have created a page that use php includes within the div tags. On the contact page, the form is flowing behind the footer versus pushing it down.

Any Help would be great! Thanks in advance.

-Romeo

Here is a link to the test server the site is on

Here is the contact.php code:

Here is the CSS

body

{

background-image: url(images/bg.jpg);

background-repeat: repeat-x;

font-family:"Times New Roman",Georgia,Serif;

font-size:15px;

line-height: 20px;

color:black;

min-height: 100%;

}



#wrapper

{

width:1024px;

height:100%;

min-height: 100%;

height: auto !important;

margin: auto auto;

padding-bottom: 50px;

/* border: 1px solid black; */

}



#headerBackground

{

float:left;



background-image: url(images/header.png);

width:1024px;

height:128px;

}





/*   TOP NAV   */



#navWrapper

{

float:left;

height:32px;

width:1024;

margin:0px 0 0 0;

text-decoration: none;

}





/*   Normal   */

#nav

{

float:left;

display: block;

width: 92px;

height: 32px;

background: url("images/buttonBG.jpg") no-repeat 0 0;

text-decoration: none;

}



#nav:hover

{

background-position: 0 -32px;

}



#nav span

{

width:92px;

float:left;

color:#ffffff;

text-decoration: none;

font-size: 14px;

margin:8px 0 0 0;

text-align: center;

}



/*   Wide   */

#navWide

{

float:left;

display: block;

width: 172px;

height: 32px;

background: url("images/buttonBG_wide.jpg") no-repeat 0 0;

text-decoration: none;

}



#navWide:hover

{

background-position: 0 -32px;

}



#navWide span

{

float:left;

color:#ffffff;

text-decoration: none;

font-size: 14px;

margin:8px 0 0 0;

text-align: center;

width:172px;

}





/*   END TOP NAV   */





#brent

{

float:right;

background-image: url(images/brent.png);

width:234px;

height: 548px;

min-height:100%;

z-index: 49;

position: relative;

margin: 50px 0 0 0;

}



#copyWrapper

{

float:left;

width:370px;

margin:30px 0 0 30px;

min-height: 100%;

}



#copyBorder

{

float:left;

background-image: url(images/copyShadow.png);

width:13px;

height:382px;

margin:0 0 0 38px;



}



#guestWrapper

{

float:left;

width:234px;

font-style: italic;

font-weight: bold;

margin: 80px 0 0 40px;

min-height: 100%;

}



#question

{

display: block;

width: 264px;

height: 24px;

background: url("images/questionBtn.png") no-repeat 0 0;



}



#question:hover

{

background-position: 0 -24px;

}



#question span

{



}



.podcastHeader

{

font-size: 16px;

font-weight: bold;

margin: 20px 0 0 10px;

}







/*   Footer   */







#footerWrapper

{

clear: both;

height:282px;

min-width:100%;

position: fixed;

bottom:0;

margin: -30px 0 0 0;

background-color: white;

}





#innerFooter

{

padding-top: 20px;

width:1024px;

margin: auto auto;

}



#wellLinks

{

margin-top: 20px;

width:1024px;

}

[KarlB]

Even though you are clearing the footer, you have the floated elements inside a separate div, you need to place a clearing element inside that div. A quick fix would be as follows:

with the css being

.clear {

clear:both;

} 

[KarlB]

Yeah I should have tested before offering advice on the situation. I overlooked the position fixed area. virtual is correct.

[Author]

Posts