Solved

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

Posted on 2015-01-10
6
79 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
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 100 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 6

Accepted Solution

by:
Mikkel Sandberg earned 400 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

910 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now