I have a page linked below that has an issue with the footer. When the viewport is squished so that the height of the browser is incredibly small, the footer-container and footer contents hide and/or overlay the main div called “page”. Is there a quick fix to add to either div?
LINK-
Thanks in advance,
Todd
Hey Todd,
Would that have something to do with position:absolute? Is that CSS rule not positioning the footer absolutely to the bottom of the page with a height of 220px?
This is just a shot at your question with my very limited knowledge, but I encountered a lot of problems when I positioned every div on a page absolutely the other day and had a lot of white space. Luckily the guys on here sorted it for me!
Let me know if that helps 
Todd,
As @JohnoLFC noted, the footer on your page is absolutely positioned, not sticky.
Here are a couple of links to sticky footer designs. Perhaps they will help.
Your problem is because of absolute and relative positioning. When you assign a div with a “relative” position, any elements you put inside that div with an “absolute” position will be placed relative to the parent div.
Because your “footer-container” is a child of “body” and “body” does not have a relative position that is where your problem is.
Just add position:relative; to your body and it should take care of your problem.
I used to take a quick peek (here: http://ryanfait.com/sticky-footer/) when building a sticky footer until I learnt to do it by myself
I’m afraid that won’t work either as that will just stick it to the bottom of the initial viewport and will then scroll away with content.
used to take a quick peek (here: http://ryanfait.com/sticky-footer/) when building a sticky footer until I learnt to do it by myself
That one is badly flawed also and has been so for years (and despite letting the author know a few times that it was broken it was never fixed).
When the viewport is squished so that the height of the browser is incredibly small, the footer-container and footer contents hide and/or overlay the main div called “page”. Is there a quick fix to add to either div?
There’s not a quick fix for this other than removing the position:absolute and letting the footer go back in the flow. If you want a real sticky footer then you need the correct page structure. Here’s an old example with a wide header and footer and shows what you need.
The CSS faq at the top of the forum has a good rundown on the sticky footer techniques (which incidentally were first seen in my demos back in 2003 and on which most others have now copied) and offers best techniques for best results.
However, these days where responsive design is important I would go with the auto height sticky footer that Ron kindly linked to above. It needs a certain structure to work but is the only sticky footer that allows for fluid content which is important for a fluid design.
(If you get stuck then shout and I’ll offer some specific code for your site - but I have to rush out at the moment.)
I have tried to model my code after the “old example” that was referenced and it is working… somewhat. Here is a link to view my progress:
http://www.tocdocs.com/new/index.032113.php
Scenario One-
If you have scrolled all the way to the bottom of the page and then resize the height of the viewport, it appears that the footer-container is locked to the bottom.
Scenario Two-
If for some strange reason, you decrease the height of the viewport and then scroll up to reveal the top of the page; and then increase the height of the viewport, it does not seem to work correctly in that the footer-container doesn’t stay locked to the bottom as the viewport height increases.
I’m calling out to you Paul! Can you help me out here?
(I am noticing that I am trying to fix some code that was probably not written correctly to begin with and it may be more helpful to rewrite the page from scratch. I am learning the hard way).
Todd
Hi Todd,
I’m out at the moment but I will be back at my computer this evening and take a look for you (unless someone else beats me to it.)
Hi,
Here are the changes you need:
#wrap {
width: 1000px;
[B]margin:-408px auto 0;/* sticky footer control 148 + 220 + 40*/[/B]
min-height: 100%;
}
* html #wrap { height: 100% }
body:before {
content: "";
height: 100%;
float: left;
width: 0;
margin-top: -32767px; /*negate effect of float*/
}
#wrap:after {
clear: both;
display: block;
height: 1%;
content: " ";
}
#inner {
width: 1000px;
padding: 25px 0;
overflow: hidden;
margin: auto;
[B] border-top:408px solid transparent;/* sticky footer soak up 148 + 220 + 40*/[/B]
}
#footer-container {
width: 100%;
background-color: #44545F;
padding: 20px 0;
[B]margin:0;[/B]
position: relative;
height: 220px;
overflow: hidden;
}
And here it is in your code in a working example.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>New TOC With Server Side Includes</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body { height: 100%; }
img { vertical-align: bottom; }
a, a:active, #nav li a:active { outline: none; }
a:focus, #nav li a:focus, {
-moz-outline-style: none;
}
a img { border: 0; }
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
body {
background: #FFF url(http://www.tocdocs.com/new/i/gfx_bkg_blue.jpg) no-repeat top center;
padding: 0;
margin: 0;
}
#header-container {
width: 100%;
height: 148px;
background: transparent url(http://www.tocdocs.com/new/i/gfx_bkg_header.png) repeat-x top center;
position: relative;
z-index: 2; /*overflow: hidden;*/
clear: both;
}
#header {
width: 1000px;
margin: 0 auto;
position: relative;
padding: 0;
}
#logo {
background: url(http://www.tocdocs.com/new/i/gfx_sprite.png) no-repeat 0 -9px;
height: 88px;
width: 401px;
float: left;
text-indent: -9999px;
margin: 9px 0 0 0;
padding: 0;
height: 88px;
width: 401px;
display: block;
overflow: hidden;
}
#logo a {
display: block;
height: 88px;
}
#nav {
background: url(http://www.tocdocs.com/new/i/gfx_sprite.png) no-repeat 0 -97px;
width: 100%;
height: 51px;
list-style: none;
position: absolute;
top: 97px;
left: 0px;
margin: 0;
padding: 0 0 0 17px;
text-indent: -9999px;
overflow: visible;
z-index: 99;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
#nav li {
float: left;
position: relative;
}
#nav li a {
text-indent: -9999px;
display: block;
height: 51px;
line-height: 51px;
text-decoration: none;
}
#nav li:hover { visibility: visible; }
#nav li ul {
position: absolute;
top: 100%;
left: 0;
margin-left: -999em;
padding: 0;
border-right: 1px solid #F47A1F;
border-left: 1px solid #F47A1F;
border-bottom: 1px solid #F47A1F;
}
#nav li:hover ul {
margin-left: 0;
cursor: pointer;
}
#nav li li {
float: none;
display: block;
font-family: Arial, Helvetica, sans-serif;
}
#nav li li a {
background: #FFF !important;
height: auto !important;
padding: 0 8px;
color: #647179;
text-indent: 0;
margin: 0;
cursor: pointer;
border-top: 1px #F47A1F solid;
width: 230px !important;
line-height: 32px;
font-size: 12px;
}
#nav li li a:hover {
background: #647179 !important;
color: #FFF;
text-decoration: none;
cursor: pointer;
width: 230px !important;
text-indent: 0;
margin: 0;
}
#nav ul li { position: relative; }
#nav ul ul { top: 0; }
#nav li ul ul {
left: 246px;
margin: 0 0 0 10px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul { display: none; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul { display:block; }
#nav li.doctors a {
background: url(http://www.tocdocs.com/new/i/gfx_sprite.png) no-repeat 17px 97px;
width: 100px;
}
#nav li.specialties a {
background: url(http://www.tocdocs.com/new/i/gfx_sprite.png) no-repeat 17px 97px;
width: 109px;
}
#nav li.patient-info a {
background: url(http://www.tocdocs.com/new/i/gfx_sprite.png) no-repeat 17px 97px;
width: 121px;
}
#nav li.services a {
background: url(http://www.tocdocs.com/new/i/gfx_sprite.png) no-repeat 17px 97px;
width: 92px;
}
#nav li.locations a {
background: url(http://www.tocdocs.com/new/i/gfx_sprite.png) no-repeat 17px 97px;
width: 105px;
}
#nav li.quick-care-after-hours a {
background: url(http://www.tocdocs.com/new/i/gfx_sprite.png) no-repeat 17px 97px;
width: 221px;
}
#nav li.media-room a {
background: url(http://www.tocdocs.com/new/i/gfx_sprite.png) no-repeat 17px 97px;
width: 118px;
}
#nav li.contact a {
background: url(http://www.tocdocs.com/new/i/gfx_sprite.png) no-repeat 17px 97px;
width: 101px;
}
#nav li.doctors a:hover { background-position: -17px -245px; }
#nav li.specialties a:hover {
background-position: -118px -245px;
width: 108px;
margin: 0 0 0 1px;
}
#nav li.patient-info a:hover {
background-position: -227px -245px;
width: 120px;
margin: 0 0 0 1px;
}
#nav li.services a:hover {
background-position: -348px -245px;
width: 91px;
margin: 0 0 0 1px;
}
#nav li.locations a:hover {
background-position: -440px -245px;
width: 104px;
margin: 0 0 0 1px;
}
#nav li.quick-care-after-hours a:hover {
background-position: -545px -245px;
width: 220px;
margin: 0 0 0 1px;
}
#nav li.media-room a:hover {
background-position: -766px -245px;
width: 117px;
margin: 0 0 0 1px;
}
#nav li.contact a:hover {
background-position: -884px -245px;
width: 100px;
margin: 0 0 0 1px;
}
.portal {
width: 137px;
height: 47px;
display: block;
position: absolute;
top: 26px;
right: 264px;
background: url(http://www.tocdocs.com/new/i/gfx_sprite.png) no-repeat -599px -26px;
text-indent: -9999px;
}
.portal:hover { background-position: -599px -174px; }
.appointment {
width: 224px;
height: 47px;
display: block;
position: absolute;
top: 26px;
right: 31px;
background: url(http://www.tocdocs.com/new/i/gfx_sprite.png) no-repeat -745px -26px;
text-indent: -9999px;
}
.appointment:hover { background-position: -745px -174px; }
#nav .services ul .multi span { padding: 0 0 0 150px; }
.arrow-right {
content: "";
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid #F47A1F;
}
#wrap {
width: 1000px;
margin:-408px auto 0;/* sticky footer control 148 + 220 + 40*/
min-height: 100%;
}
* html #wrap { height: 100% }
body:before {
content: "";
height: 100%;
float: left;
width: 0;
margin-top: -32767px; /*negate effect of float*/
}
#wrap:after {
clear: both;
display: block;
height: 1%;
content: "";
}
#inner {
width: 1000px;
padding: 25px 0;
overflow: hidden;
margin: auto;
border-top:408px solid transparent;/* sticky footer soak up 148 + 220 + 40*/
}
#slider {
width: 609px;
float: left;
padding: 0px 0px 0px 36px;
background: transparent url(http://www.tocdocs.com/new/i/gfx_bkg_slider.png) no-repeat 0 0;
margin: 0 31px 0 0;
}
.three-column, .one-column {
padding: 0 0 0 36px;
overflow: hidden;
width: 100%
}
#promo-left, #promo-mid, #promo-right {
float: left;
width: 290px;
margin-right: 33px;
font: 13px/18px Helvetica, Arial, sans-serif;
}
#promo-left a, #promo-mid a, #promo-right a {
color: #000;
text-decoration: underline;
font: italic 13px/18px Georgia, "Times New Roman", Times, serif;
}
#content {
width: 609px;
background-color: #FFF;
padding: 12px;
margin: 0 38px 0 0;
float: left;
font: normal 14px/18px Helvetica, Arial, sans-serif;
}
#events {
width: 286px;
padding: 5px 12px 12px 12px;
float: left;
font: normal 14px/18px Helvetica, Arial, sans-serif;
margin: 0 14px 0 0;
}
#sidebar {
width: 286px;
padding: 0px 12px 12px 12px;
float: left;
font: normal 14px/18px Helvetica, Arial, sans-serif;
}
#footer-container {
width: 100%;
background-color: #44545F;
padding: 20px 0;
margin:0;
position: relative; /*bottom: 0;*/
height: 220px;
overflow: hidden;
}
#footer {
margin: 18px auto;
width: 1000px;
color: #FFF;
font: 12px/18px Helvetica, Arial, sans-serif;
overflow: hidden;
}
#recent-news {
width: 230px;
margin: 0 96px 0 0;
float: left;
}
#what-hurts {
width: 176px;
margin: 0 136px 0 62px;
float: left;
}
#get-social {
width: 230px;
margin: 0 0 0 0;
float: left;
}
#what-hurts ul, #recent-news ul, #get-social ul { list-style: none; }
#what-hurts a, #recent-news a, #get-social a { color: #FFF; }
#what-hurts ul li a, #get-social ul li a { text-decoration: underline; }
#what-hurts ul li a:hover, #get-social ul li a:hover { text-decoration: none; }
#recent-news p { padding: 0 0 15px 0; }
#get-social a { padding: 0 0 0 30px; }
#get-social li { margin: 10px 0; }
.facebook {
background: transparent url(http://www.tocdocs.com/new/i/gfx_icons.gif) no-repeat 0 0;
height: 20px;
}
.twitter {
background: transparent url(http://www.tocdocs.com/new/i/gfx_icons.gif) no-repeat 0 -28px;
height: 20px;
}
.youtube {
background: transparent url(http://www.tocdocs.com/new/i/gfx_icons.gif) no-repeat 0 -56px;
height: 20px;
}
.subscribe {
background: transparent url(http://www.tocdocs.com/new/i/gfx_icons.gif) no-repeat 0 -83px;
height: 20px;
}
.sitemap {
background: transparent url(http://www.tocdocs.com/new/i/gfx_icons.gif) no-repeat 0 -113px;
height: 20px;
}
#footer h2 {
text-indent: -9999px;
height: 23px;
}
#what-hurts h2 { background: transparent url(http://www.tocdocs.com/new/i/gfx_h2_what_hurts.gif) no-repeat 0 0; }
#recent-news h2 { background: transparent url(http://www.tocdocs.com/new/i/gfx_h2_recent_news.gif) no-repeat 0 0; }
#get-social h2 { background: transparent url(http://www.tocdocs.com/new/i/gfx_h2_get_social.gif) no-repeat 0 0; }
#what-hurts h2, #recent-news h2 { margin: 0 0 10px 0; }
h3 {
width: 100%;
text-indent: -9999px;
width: 285px;
height: 159px;
margin: 0 0 18px 0;
}
h3.media-room { background: url(http://www.tocdocs.com/new/i/gfx_inset_media_room.jpg) no-repeat 0 0; }
h3.community { background: url(http://www.tocdocs.com/new/i/gfx_inset_community.jpg) no-repeat 0 0; }
h3.threat { background: url(http://www.tocdocs.com/new/i/gfx_inset_threat.jpg) no-repeat 0 0; }
.event {
box-shadow: 0 0 0 2px #FFF, 0 0 0 5px #0098D7;
margin: 0 11px 25px 0;
}
</style>
</head>
<body>
<div id="header-container">
<div id="header">
<h1 id="logo"><a href="#">Tennessee Orthopaedic Clinics - The Power of Results.</a></h1>
<ul id="nav">
<li class="doctors"><a href="#">Doctors</a>
<ul>
<li><a href="#">Listed Alphabetically</a></li>
<li><a href="#">Listed by Location</a></li>
<li><a href="#">Listed by Specialty</a></li>
<li><a href="#">Physician Assistants <span></span></a></li>
</ul>
</li>
<li class="specialties"><a href="#">Specialties</a>
<ul>
<li><a href="#">Elbow</a></li>
<li><a href="#">Hand and Wrist</a></li>
<li><a href="#">Knee</a></li>
<li><a href="#">Spine</a></li>
<li><a href="#">Sports Medicine</a></li>
<li><a href="#">Foot and Ankle</a></li>
<li><a href="#">Hip</a></li>
<li><a href="#">Shoulder</a></li>
<li><a href="#">Total Joint Replacement</a></li>
<li><a href="#">Podiatry</a></li>
</ul>
</li>
<li class="patient-info"><a href="#">Patient Information</a>
<ul>
<li><a href="#">Introduction</a></li>
<li><a href="#">Patient Portal</a></li>
<li><a href="#">First Visit</a></li>
<li><a href="#">Appointments</a></li>
<li><a href="#">Insurance</a></li>
<li><a href="#">Forms</a></li>
<li><a href="#">Patient Education</a></li>
</ul>
</li>
<li class="services"><a href="#">Services</a>
<ul>
<li><a href="#">MRI</a></li>
<li><a href="#">Saturday Morning Clinics</a></li>
<li><a href="#">Sports Medicine</a></li>
<li><a href="#">Surgery Center</a></li>
<li class="multi"><a href="#">Therapy <span>▶</span></a>
<ul>
<li><a href="#">Hand</a></li>
<li><a href="#">Physical</a></li>
<!--<li><a href="#">Occupational</a></li>-->
</ul>
</li>
<li><a href="#">TOC Spine</a></li>
<li><a href="#">Work Comp (Work Link)</a></li>
</ul>
</li>
<li class="locations"><a href="#">Locations</a>
<ul>
<li><a href="#">TOC at Fort Sanders Regional<!-- in the Center for Advanced Medicine--></a></li>
<li><a href="#">The Tower at Parkwest</a></li>
<li><a href="#">Oak Ridge Physicians Plaza</a></li>
<li><a href="#">Lenoir City</a></li>
<li><a href="#">Seymour</a></li>
<li><a href="#">TOC Spine</a></li>
<li><a href="#">Podiatry Parkwest</a></li>
<li><a href="#">Podiatry Oak Ridge</a></li>
<li><a href="#">Dr. Randall R. Robbins Location</a></li>
<li><a href="#">Central Business Office</a></li>
</ul>
</li>
<li class="quick-care-after-hours"><a href="#">Quick Care After Hours</a></li>
<li class="media-room"><a href="#">Media Room</a></li>
<li class="contact"><a href="#">Contact</a>
<ul>
<li><a href="#">TOC Careers</a></li>
<li><a href="#">Administration</a></li>
<li><a href="#">Sitemap</a></li>
</ul>
</li>
</ul>
<a href="http://www.tocdocs.com/patient-portal.html" class="portal">Patient Portal</a> <a href="https://www.tocdocs.com/appointments/" class="appointment">Schedule an Appointment</a> </div>
</div>
<div id="wrap">
<div id="inner">
<div id="slider"> <img src="http://www.tocdocs.com/new/i/gfx_slider.jpg" width="609" height="265" alt=""> </div>
<div id="events"> <a href="#"><img src="http://www.tocdocs.com/new/i/gfx_education_032013.jpg" width="130" height="255" alt="" class="event"></a> <a href="#"><img src="http://www.tocdocs.com/new/i/gfx_event_032013.jpg" width="130" height="255" alt="" class="event"></a> </div>
<!--
<div class="three-column">
<div id="promo-left">
<h3 class="media-room"><a href="#">Media Room</a></h3>
<p>Stay up to date with the latest news releases, upcoming events, latest videos, and patient success stories. Discover more about how our best practices are helping patients thrive in everday life. <a href="#">» Learn More</a></p>
</div>
<div id="promo-mid">
<h3 class="community"><a href="#">Community</a></h3>
<p>Buddy's Race Against Cancer 5K raises funds for Thompson Cancer Survival Center's Cancer Outreach Services. TOC associates have volunteered to run and raised over $2,000. <a href="#">» Learn More</a></p>
</div>
<div id="promo-right">
<h3 class="threat"><a href="#">Threat to Health Care</a></h3>
<p>The Government Wants To Ban Advanced Diagnostics and Physical Therapy Services For All Medicare Patients and Military Personnel at Physician-Owned Medical Practices! <a href="#">» Learn More</a></p>
</div>
</div>
<div class="one-column">
</div>
-->
</div>
</div>
<div id="footer-container">
<div id="footer">
<div id="what-hurts">
<h2>What Hurts?</h2>
<ul>
<li><a href="#">Elbow</a></li>
<li><a href="#">Foot and Ankle</a></li>
<li><a href="#">Hand and Wrist</a></li>
<li><a href="#">Hip</a></li>
<li><a href="#">Knee</a></li>
<li><a href="#">Shoulder</a></li>
<li><a href="#">Spine</a></li>
<li><a href="#">Total Joint Replacement</a></li>
<li><a href="#">Sports Medicine</a></li>
<li><a href="#">Podiatry</a></li>
</ul>
</div>
<div id="recent-news">
<h2>Recent News</h2>
<p>Immediate Threat To The Health Care of Medicare/Medicaid Patients and Military Personnel!</p>
<p>TOC Celebrates a 40 Year Milestone!</p>
<p>Hip patient impressed with care at Fort Sanders Joint Center.</p>
</div>
<div id="get-social">
<h2>Get Social With TOC</h2>
<ul>
<li class="facebook"><a href="#">Like us on Facebook</a></li>
<li class="twitter"><a href="#">Follow us on Twitter</a></li>
<li class="youtube"><a href="#">Browse on YouTube Channel</a></li>
<li class="subscribe"><a href="#">Subscribe to our E-Newsletter</a></li>
<li class="sitemap"><a href="#">Sitemap</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Okay, so the fixes work and that is ultimately what I wanted to happen, but I need to be learning from this process so that I don’t have to bug you each and every time I stumble into a CSS mystery. LOL
I see that the sticky footer number is being derived from the numbers 148, 220, and 40. The 148px is the height of the header-container were as the 220px is the height of the footer-container with the added 40px for the padding (20px 0;). So that is where the sum 408px comes from, but why those three numbers? And why would it be added to the div #wrap as a negative margin only on the top?
At first glance, it would seem to make more sense to me to have the header-container number (148px) be a negative top margin for the #wrap and then add a negative margin of 260px (220 + 40) for the footer-container. Something like this:
#wrap { margin: -148px auto -260px; }
So much to learn… so much to learn…
Thanks again for helping me time after time Paul. I really appreciate it more than you know.
Todd
Ok, the way a sticky footer works is like this:
A viewport is 100% high and you need the footer to stick to the bottom when content is less than 100%. To get the initial viewport height you use min-height:100% on the wrapper element which calculates its height from the html,body height:100% as you can only base a percentage height on an element that has a height defined. You can’t base min-height or a percentage height on an element that is only defined by its content or a previous min-height. (This effectively means that the wrap overflows the body element but that doesn’t really matter as the body is a little special and won’t cause an issue.) That’s why you only get one shot at the min-height:100% and it can only happen on an element that is a direct child of the body and not nested in another element.
Once we have our 100% element we then put our fixed height footer after this wrap element which puts the sticky footer below the viewport and invisible. Therefore we need to drag the footer back upwards so that it is visible. If we drag it into view with a negative top margin on the footer or a negative bottom margin on the wrap the footer will then be visible at the bottom of the viewport but it will overlap any content that was in the way. This is why you then resort to using a “push” element as the last element on the page to soak up the space that the footer is drawn into. This is awkward as you have to keep moving the push element around depending on the content on the page and is an extra wasted element anyway.
My approach is instead to drag the wrap upwards out of the top of the monitor and consequently allows the footer to be visible at the bottom of the viewport without overlapping the content. However the top of the wrap now is above the monitor and content would be missing. Therefore we add to the first nested element a top border equal to the height of the footer which pushes that content back into view. The benefit of this approach is no extra element is needed and once you have done this you can forget about it forever. There is no need to keep making sure you have the push element in the right place as you add more content.
Now to answer your question we need to somehow take account of the wide header as well as the sticky footer. As you worked out we need the content of our layout to be the height of the viewport minus the height of the header and the footer. (Usually we would need to consider the header but as you have a 100% width header outside the main wrap we have to include it in our calculations.) This equates to 100% - header - footer. The wrap initially starts below the header which means its 100% height goes way below the fold. therefore we drag the wrap up through the header and through the top of the viewport until its bottom edge is a sticky footer distance away from the bottom of the viewport.
The drawback of the sticky footer approach is that you need to know the height of the footer and in your case the height of the header as well. That’s why these days I use the auto height sticky footer approach but you need to build your layout inside the structure as its is based on display:table, table-row and table-cell. It only works in IE8+ but should degrade well in other browsers if you supply suitable styles but the benefit is that it needs no calculations and the footer can be auto height (and so could the header).
I hope that explains it
Paul,
That was very informative. I am not quite sure I understand it all at this point but I am going to spend some more time trying to grasp the concept.
I was just now checking the site and noticed that the div #wrap looks like it is being forced way too far down the page in IE8. Can you take a look at the example snapshot that shows the differences between IE7 and IE8? What is going on here?
Hi,
It looks like a bit of a bug in IE where the negative margin gets upset by the float in the header. Add display:table to the header which should allow it to work.
#header {
width: 1000px;
margin: 0 auto;
position: relative;
padding: 0;
display:table;
}
That did the trick Paul. I appreciate you more than you know!