Why is my footer being displayed in the middle of my page?

If you head out to http://hihatwebdesign.com/crystal/test.php, you'll see the page that's giving me grief.

I've got the body content with a background color of red. This is part of my attempt to distinguish where things are going south.

The problem is that my footer - the portion that's in grey - is being displayed in the middle of my page. It needs to be at the bottom.

I'm thinking that the solution will have something to do with the way I craft my CSS settings for "body_filler." That's the portion that's in red. Since my footer seems to be butting up against that div, I was guessing that it's there that I need to make a change. But I don't know what.

Just in case you're looking at the page and you can't see the problem, the grey footer section is covering up some lines of text belonging to the quote just above it.

Here's my CSS. What do I need to change?

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

body {
height:100%;
width:100%;
background-image:url(images/new_background.jpg);
background-repeat:repeat-x;
}

#clouds {
position:absolute;
margin:0px;
width:100%;
height:318px;
z-index:1;
}

#cloud_left {
position:relative;
float:left;
background-image:url(images/left_clouds.png);
width:446px;
height:314px;
margin-left:-10px;
z-index:1;
}

#cloud_right {
position:relative;
float:right;
margin-top:-10px;
margin-right:-10px;
z-index:0;
width:503px;
height:318px;
background-image:url(images/right_clouds.jpg);
}

.wrapper {
position:absolute;
z-index:2;
width:100%;
height:100%;
min-width:1012px;
margin:auto;
}

#header_image {
position:relative;
width:1012px;
height:335px;
margin:auto;
}

#carousel {
position:absolute;
float:right;
margin-left:533px;
margin-top:0;
width:479px;
height:335px;
z-index:3;
top:0px;
}


/*This defines my container, as in the area of the nav bar with the background image of the nav_bar.png*/
#navcontainer {
width:1012px;
height:46px;
top:0px;
margin:auto;
padding-left:0px;
}

/*this sets up my bulleted list, which is my list of graphic buttons */
#navcontainer ul {
position: absolute;
padding:0;
margin: 0px;
background-image:none;
list-style-type:none;

}

/*here's my list characteristics as far how things are displayed and how they're "floated" */
#navcontainer ul li {
position: relative;
display: block;
float: left;
z-index:10;
}

#navcontainer ul li a {
text-decoration: none;
display: block;
padding-right: 0px;
}

/* this command tells my li's within the first tier of ul's to bust out with a pulldown menu */
#navcontainer ul li:hover > ul 
{
display: block;
}

/* now we're getting jiggy with it by establishing the rules for the actual pulldown menu */
#navcontainer ul ul {
display: none;
background: none;
margin-top: 0px;
padding: 0;
width: 225px;
position: absolute;
background-color: #C9BDAF;
border-style:solid;
border-width: thin;
border-color:#7D674F;
line-height:35px;
height:auto;
z-index:100;
}

#navcontainer ul ul li {
float:none;
margin:0px;
padding:0;
}

#navcontainer ul ul li a {
display: block;
float:none;
margin: 0 0 0 10px;
padding: 0;
font-family: Helvetica, Microsoft Sans Serif;
font-size: 18px;
color:#493417;
padding-left:0px;
z-index:10;
}	

#navcontainer ul ul li:hover > ul 
{
display: block;
}

#navcontainer ul ul li:hover {
display:block;
}

#navcontainer:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

a.home_button {
width:125px;
height:46px;
background-image:url(images/home_up.png);
background-repeat:no-repeat;
}

a.home_button:hover {
width:125px;
height:46px;
background-image:url(images/home_down.png);
background-repeat:no-repeat;
}

a.about_button {
width:128px;
height:46px;
background-image:url(images/about_up.png);
background-repeat:no-repeat;
}

a.about_button:hover {
width:128px;
height:46px;
background-image:url(images/about_down.png);
background-repeat:no-repeat;
}

a.services_button {
width:192px;
height:46px;
background-image:url(images/service_up.png);
background-repeat:no-repeat;
}

a.services_button:hover {
width:192px;
height:46px;
background-image:url(images/service_down.png);
background-repeat:no-repeat;
}

a.patients_button {
width:157px;
height:46px;
background-image:url(images/patient_up.png);
background-repeat:no-repeat;
}

a.patients_button:hover {
width:157px;
height:46px;
background-image:url(images/patient_down.png);
background-repeat:no-repeat;
}

 a.sedation_button {
width:260px;
height:46px;
background-image:url(images/sedation_up.png);
background-repeat:no-repeat;
}

a.sedation_button:hover {
width:260px;
height:46px;
background-image:url(images/sedation_down.png);
background-repeat:no-repeat;
}

a.contact {
width:150px;
height:46px;
background-image:url(images/contact_up.png);
background-repeat:no-repeat;
}

 a.contact:hover {
width:150px;
height:46px;
background-image:url(images/contact_down.png);
background-repeat:no-repeat;
}


#top_graphic {
position:relative;
margin:auto;
width:1012px;
height:34px;
background-image:url(images/top_graphic.png);
background-repeat:none;
}

#marquee {
position:relative;
margin:auto;
text-align:center;
padding-top:5px;
width:985px;
}

#body_filler {
position:relative;
margin:auto;
width:1012px;
height:100%;
min-height:100%;
background-image:url(images/body_filler.png);
background-repeat:repeat-y;
background-color:red;
}

#left_container {
position:relative;
float:left;
width:699px;
height:100%;
}

#left_copy {
padding-left:20px;
width:660px;
min-height:100%;
font-family: Helvetica, Microsoft Sans Serif;
font-size: 14px;
}

#right_container {
position:relative;
float:left;
width:313px;
height:100%
}

#right_copy {
padding-right:10px;
width:300px;
height:100%;
font-family: Helvetica, Microsoft Sans Serif;
font-size: 14px;
}

#request_form {
position:relative;
width:314px;
height:357px;
background-image:url(images/form.png);
background-repeat:none;
}

#request_content {
position:absolute;
margin-top:75px;
margin-left:28px;
width:285px;
height:365px;
}

#address_content {
position:absolute;
margin-top:460px;
margin-left:26px;
height:250px;
}

#academy {
position:absolute;
margin-top:720px;
margin-left:4px;
}

#braces {
position:absolute;
z-index:2;
width:250px;
height:49px;
margin-left:400px;
margin-top:-25px
}

#staff_display {
font-family: Helvetica, Microsoft Sans Serif;
color:#ffffff;
font-size:12pt;
}

#staff_display_bold {
font-family: Helvetica, Microsoft Sans Serif;
color:#ffffff;
font-size:12pt;
font-weight:strong;
}

.footer {
position:relative;
margin:auto;
width:1012px;
height:85px;
font-family: Helvetica, Microsoft Sans Serif;
font-size: 12px;
font-weight:bold;
color: #63513b;
text-align:center;
background-color:#cccccc;
}


input.form {
width:230px;
border:2px solid #dadada;
font-size:14px;
padding:5px;
margin-top:-10px;    
}

input.form:focus { 
outline:none;
border-color:#f6e3cc;
box-shadow:0 0 10px #f6e3cc;
}

textarea.comment {
width:230px;
height:200px;
border:2px solid #dadada;
font-size:14px;
padding:5px;
}

textarea.comment:focus {
outline:none;
border-color:#f6e3cc;
box-shadow:0 0 10px #f6e3cc;
}



td {
font-family: Helvetica, Microsoft Sans Serif;
font-size: 14px;
}

td.center {
text-align:center;
}

td.marquee {
font-family: Verdana, Microsoft Sans Serif;
font-size: 11px;
color: #000000;
text-align: center;
width:1000px;
font-style: bold;
}

table.center {
text-align:center;
}

#portfolio { margin: 0px; }

#imagefadebox {
  display: inline; 
  position: absolute;  
  list-style-type: none; 
  list-style-position: inside; 
  list-style-image: none; 
  margin-top: 0px; 
  margin-right: 0px; 
  margin-bottom: 0px; 
   margin-left: -40px;
}

#imagefadebox_sidebar {
  display: inline; 
  position: absolute;  
  list-style-type: none; 
  list-style-position: inside; 
  list-style-image: none; 
  margin-top: 5px; 
  margin-right: 0px; 
  margin-bottom: 0px; 
  margin-left: 3px;
}

#portfolio_sidebar { 
margin:0px; 
}

td.video {
font-family: Helvetica, Microsoft Sans Serif;
color:#ffffff;
font-size:12pt;
}

a.home {
margin:0;
display:inline-block; /**** important ****/
width:125px;
height:46px;
background-image:url(images/home_up.jpg);
background-repeat:no-repeat;
}

a.home:hover {
margin:0;
width:125px;
height:46px;
background-image:url(images/home_down.jpg);
background-repeat:no-repeat;
}

a.about{
margin:0;
display:inline-block; /**** important ****/
width:128px;
height:46px;
background-image:url(images/about_up.jpg);
background-repeat:no-repeat;
}

a.about:hover {
margin:0;
width:128px;
height:46px;
background-image:url(images/about_down.jpg);
background-repeat:no-repeat;
}

a.services {
margin:0;
display:inline-block; /**** important ****/
width:192px;
height:46px;
background-image:url(images/service_up.jpg);
background-repeat:no-repeat;
}

a.services:hover {
margin:0;
width:192px;
height:46px;
background-image:url(images/services_down.jpg);
background-repeat:no-repeat;
}

a.patients {
margin:0;
display:inline-block; /**** important ****/
width:157px;
height:46px;
background-image:url(images/patients_up.jpg);
background-repeat:no-repeat;
}

a.patients:hover {
margin:0;
width:157px;
height:46px;
background-image:url(images/patients_down.jpg);
background-repeat:no-repeat;
}

a.sedation {
margin:0;
display:inline-block; /**** important ****/
width:260px;
height:46px;
background-image:url(images/sedation_up.jpg);
background-repeat:no-repeat;
}

a.sedation:hover {
margin:0;
width:260px;
height:46px;
background-image:url(images/sedation_down.jpg);
background-repeat:no-repeat;
}

a.contact {
margin:0;
display:inline-block; /**** important ****/
width:150px;
height:46px;
background-image:url(images/contact_up.png);
background-repeat:no-repeat;
}

a.contact:hover {
margin:0;
width:150px;
height:46px;
background-image:url(images/contact_down.png);
background-repeat:no-repeat;
}


a.footer {
font-family: Helvetica, Microsoft Sans Serif;
font-size: 12px;
font-weight:bold;
color: #63513b;
text-decoration:none;
}

a.footer:hover {
font-family: Helvetica, Microsoft Sans Serif;
font-size: 12px;
font-weight:bold;
color: #63513b;
text-decoration:underline;
}

a.footer:visited {
font-family: Helvetica, Microsoft Sans Serif;
font-size: 12px;
font-weight:bold;
color: #63513b;
text-decoration:none;
}

a.article_display {
font-family: Helvetica, Microsoft Sans Serif;
font-size: 14px;
color:#ffffff;
text-decoration:none;
}

a.article_display:hover {
font-family: Helvetica, Microsoft Sans Serif;
font-size: 14px;
color:#ffffff;
text-decoration:underline;
}

a.article_display:visited {
font-family: Helvetica, Microsoft Sans Serif;
font-size: 14px;
color:#ffffff;
text-decoration:none;
}

A.marquee
{
	font-family: Verdana, Microsoft Sans Serif;
	font-size: 11px;
	font-style:bold;
	color: #000000;
	text-decoration:underline;
}

A.marquee:Hover {
	font-family: Verdana, Microsoft Sans Serif;
	font-size: 11px;
	color: #000000;
	font-style:bold;
	text-decoration:underline;
}

A.marquee:Visited {
	font-family: Verdana, Microsoft Sans Serif;
	font-size: 11px;
	color: #000000;
	font-style:bold;
	text-decoration:underline;
}

Open in new window

brucegustPHP DeveloperAsked:
Who is Participating?
 
Mikkel SandbergConnect With a Mentor Front End DeveloperCommented:
I have a possible solution for you :)

Since you are floating your left_container and your right_container, you need to clear the footer. Start by changing the height on #left_container to "initial," then add "clear: both;" to .footer.
I did this in the inspector on your site, and this is what I got (see attached). Is that the desired effect?
screenshot---dentist.png
0
 
Ahmed MerghaniSoftware EngineerCommented:
Hi,

This issue related to the class ".wrapper". If you increase the "height" to 150 - for example- you will see the movement of the footer.
0
 
Ahmed MerghaniSoftware EngineerCommented:
If you ensure the contents will be as the existed, you can set "height" to 250. But this is not the good solution.
0
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

 
COBOLdinosaurConnect With a Mentor Commented:
If you want it at the bottom of the page put it directly in the body and style it with:
position:absolute;bottom:0;

If you want it sticky at the bottom of the viewport then use position:fixed instead of position absolute.

However before you deal with that you might want to fix some of the 22 validation errors; at the very least fix the structural errors that are just a ticking timebomb.

Cd&
0
 
brucegustPHP DeveloperAuthor Commented:
Mikkel, that worked. Why? Why did clear: both fix the problem? Thanks so much for your input!
0
 
Mikkel SandbergFront End DeveloperCommented:
You're welcome :)
It has to do with the way that floats work. This article on A List Apart explains it really well:
http://alistapart.com/article/css-floats-101
Happy coding!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.