Terrible Footer Problem

Garcia · February 16, 2007

I never really figured out a solution to fix the footer problem on all the websites i have created.

In my browser and resolution (Firefox, 1280 x 1024) the footer fits on the bottom of the page, now when I got to 1024 x 768 in any browser the right content box goes under the footer being cut off.

Is the due possibly to the height of the container? Any fix on how to do this?

My page qualifies as XHTML valid so not being valid isn't the problem

Here is the live page http://trueamericanlife.com/garciamedia/design2.html

Here are the codes

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title>Garcia Web Media</title>
  <meta name="description" content="A web design business the creates logo identities, web design, templates, and other type of graphics." />
  <meta name="keywords" content="web design, logos, templates, web templates, banners, media, garcia, web" />
<link href='design2.css' rel='stylesheet' type='text/css' />
</head>
<body>
  <div id="container">
  		<div id="containermargins">
	<div id="header">
            <div id="banner"></div>
			<div id='navbar'>
			   <ul>
		          <li><a href='#'><img src='images/home.gif' width='77' height='30' alt='' /></a></li>
				  <li><a href='#'><img src='images/about.gif' width='77' height='30' alt='' /></a></li>
		          <li><a href='#'><img src='images/services.gif' width='77' height='30' alt='' /></a></li>
                      <li><a href='#'><img src='images/portfolio.gif' width='77' height='30' alt='' /></a></li>
		          <li><a href='#'><img src='images/contact.gif' width='77' height='30' alt='' /></a></li>
	           </ul>
			 </div>
                 
		</div>
		<div id="leftcontent">
            <div id="leftcontentbg">
		<img src="images/customerquotehead.gif" height="46px" width="203px" alt=""/>
		<br/><p><b>Interested in our Services and want to request a free quote?</b><br/> A free quote will bring you a free estimated cost for any work you want done. We will get back to you as soon as possible, may take up to 24 hours for a responce.</p>
		<br/><center><a href="quote.html">Request Quote Now!</a></center>
		<br/>
		</div>
		<img src="images/leftconfade.jpg" height="111px" width="203px" alt="" />
            </div>
		<div id="rightcontent">
		<div id="rightcontentbg">
		<img src="images/rightconhead.gif" height="40px" width="569px" alt="" />
		<div id="rightcontxt"><h2>Our <i>mission</i> is to provide you with a complete web package that will fit your needs. Affordable prices, wonderful work, and great cooperative customer support. You will always leave more then satisfied. </h2>
					<br/>
		<h2><i>Garcia Web Media</i> specializes in web design, development and logo identity. We provide all services including a full web design package including a domain name, hosting, custom web design, identity logo (includes business cards) and a content management system that is easy for you to customize. Please check out our services page for full details.</h2>
		</div>
		<div id="rightconimg"><img src="images/mission.gif" width="200px" height="143px" alt="" /></div>
					<div class="txtmargin"><img src="images/bar.gif" height="7px" width="550px" alt="" /></div>
		<div id="recentprojects"><img src="images/recentprojects.gif" width="222px" height="37px" alt="" /></div>
		<div id="leftpro"><p>The last project was created as a skin for a website called True American Life. True American Life is a community simulating an american dream. We came up with a dark design resembling a blacked out city. <a href="#">Read more...</a></p></div>
		<div id="rightpro"><a href="http://trueamericanlife.com"><img src="images/project1.gif" width="199px" height="142px" border="0" alt=""/></a></div>
		<div class="footer"></div>
	</div>
	<img src="images/rightconbot.gif" height="13px" width="569px" alt="" />
	</div>
 </div>
   <div class="footer"></div>
<div id="bottom"><h3>Copyright © 2007 Garcia Web Design. All Rights Reserved.</h3></div>

</div>
</body>
</html>

html, body {
background: #51606e;
color: #48515a;
font: 12px verdana;
height: 100%;
margin: 0px;
padding: 0px;
}
a img {
border:0;
}
* {
margin: 0;
padding: 0;
}
a:link {
color: #48515a;
}
a:hover {
color: #9aa9b8;
}
a:visited {
color: #48515a;
}
a:active {
color: #48515a;
}
div#container {
background-image: url('images/bg.gif');
height: 100%;
position: relative;
width: 820px;
margin: auto;
}
* html #container {
height:100%;

}
div#containermargins {
margin: 0 10px 0 10px;
}
div#header {
height: 140px;
padding: 0 0 2em 0;
}
div#banner {
background-image: url('images/banner.jpg');
width: 100%;
height: 100px;
}
#navbar {
height:40px;
background-image: url('images/navbg.gif');
width: 100%;
}
#navbar ul {
list-style:none;
}
#navbar ul li {
float:left;
margin: 2px 0 0 10px;
}
div#leftcontent {
float: left;
width: 220px;
}
div#leftcontentbg{
background-image: url('images/leftconbg.gif');
width: 203px;
}
div#rightcontent {
width: 569px;
float: right;
}
div#rightcontxt {
float: left;
width: 345px;
}
div#rightconimg {
float: right;
width: 220px;
}
div#rightcontentbg{
background-image: url('images/rightconbg.gif');
width: 569px;
}
div#rightpro {
float: right;
width: 220px;
}
div#leftpro {
float: left;
width: 345px;
}
.footer {
display: block;
clear:both;
}
.spacer {
clear: both;
height: 40px;
width: 100%;
}
div#bottom {
display: block;
clear: both;
position: absolute;
bottom: 0;
background-color: #3d4855;
margin: 0 0 0 10px;
width: 800px;
height: 30px;
border-top: 1px solid #223241;
border-bottom: 1px solid #223241;
}
p {
margin-left: 8px;
margin-right: 8px;
}
h3 {
font: 12px verdana;
color: #FFF;
text-align: center;
}
h2 {
color: #FFFFFF;
font: 12px verdana;
margin-left: 8px;
margin-right: 8px;
}
div#recentprojects{
margin-left: 20px;
padding-top: 5pt;
}
.txtmargin {
margin-left: 10px;
}

Any help would be greatly appreciated since I just spent an hour and a half trying to debug my errors .

Thanks!

thetechgeek · February 16, 2007

(a screenshot of this would help)

try using absolute positioning.

PS-

next time please only put the code you're having trouble with...

cx323 · March 1, 2007

it's the absolute positioning causing the problem. the css is telling it to always be at the bottom, on your resolution it works fine, but on others it won't. try putting a containing div around everything, and allow the other content to push the footer to the bottom

chronister · March 5, 2007

Your Live page is not live.

I cannot access it. It is timing out at the DNS server. I even tried to ping the site and DNS failed there too.

Anyone else having this problem?

How long ago was this site set up? Don't seem like the Domain Name has populated through the DNS System

Nate

Sign In

Terrible Footer Problem

Recommended Posts

Garcia

Link to comment

Share on other sites

thetechgeek

Link to comment

Share on other sites

cx323

Link to comment

Share on other sites

chronister

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information