Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2015-01-10
6
Medium Priority
?
89 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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

Technology Partners: 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!

Question has a verified solution.

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

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses

604 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