?
Solved

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

Posted on 2015-01-10
6
Medium Priority
?
87 Views
Last Modified: 2015-01-12
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

0
Comment
Question by:brucegust
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 
LVL 8

Expert Comment

by:Ahmed Merghani
ID: 40542180
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
 
LVL 8

Expert Comment

by:Ahmed Merghani
ID: 40542204
If you ensure the contents will be as the existed, you can set "height" to 250. But this is not the good solution.
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 400 total points
ID: 40542291
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 6

Accepted Solution

by:
Mikkel Sandberg earned 1600 total points
ID: 40542332
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
 

Author Comment

by:brucegust
ID: 40544337
Mikkel, that worked. Why? Why did clear: both fix the problem? Thanks so much for your input!
0
 
LVL 6

Expert Comment

by:Mikkel Sandberg
ID: 40544627
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

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses
Course of the Month11 days, 16 hours left to enroll

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question