background not extending...

**deronsizemore** · Sep 13, 2004 13:19

Everything was just fine until I added the footer in there. I am trying to accomplish having the footer stay at the bottom of the page regardless of how much content the page holds. I added the footer and clearfooter divs in there like I've see in so many examples before and now my background isn't extending to 100% height. I'm sure this is something small, just can't figure it out.

Here is my code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>deronsizemore.com - Deron Sizemore's personal portfolio site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body, html {height: 100%;}
body {
margin: 0;
padding: 0;
color: #000000;
background: url(images/bg2.gif);
}
#outer {
width: 700px;
background: url(images/bg.gif) repeat-y left top;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
_height: 100%;
min-height: 100%;
margin: auto;
clear: both;
}
html>#outer {height:auto;}
#header {
border-bottom: 1px solid #000000;
background: #ffffff;
height: 30px;
width: 700px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
color: #000000;
padding-top: 2px
}
#leftheader {
float: left;
margin-right: 155px;
}
#rightheader {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
color: #000000;
padding-top: 7px;
}
#rightheader a:link {
color: #6666ff; 
text-decoration: none;
}
#rightheader a:hover {
color: #6666ff; 
text-decoration: underline; 
}
#rightheader a:visited {
color: #6666ff; 
text-decoration: none;
}
#rightheader a:visited:hover {
color: #6666ff; 
text-decoration: underline;
}
#picheader {
height: 150px;
background: url(images/blueback.jpg);
border-bottom: 1px solid #000000;
}
#picheader img {
border-right: 1px solid #000000;
float: left;
width: 600;
}
#content {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
width: 499px;
margin-left: 100px;
margin-top: 2px;
clear: both;
}
#content a:link {
color: #6666ff; 
text-decoration: none;
}
#content a:hover {
color: #6666ff; 
text-decoration: underline; 
}
#content a:visited {
color: #6666ff; 
text-decoration: none;
}
#content a:visited:hover {
color: #6666ff; 
text-decoration: underline;
}
#title {
padding-top: 6px;
padding-left: 10px;
}
#paragraph {
padding-top: 6px;
padding-bottom: 6px;
padding-left: 10px;
padding-right: 10px;
}
#paragraph2 {
padding-top: 6px;
padding-bottom: 6px;
padding-left: 10px;
padding-right: 10px;
}
#paragraph p {
margin: 0;
}
#footer {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 10px;
width: 501px;
margin-left: 98px;
border-top: 1px solid #9999ff;
text-align: center;
margin-top: 15px;
height: 15px;
position: absolute;
}
#footer a:link {
color: #6666ff; 
text-decoration: none;
}
#footer a:hover {
color: #6666ff; 
text-decoration: underline; 
}
#footer a:visited {
color: #6666ff; 
text-decoration: none;
}
#footer a:visited:hover {
color: #6666ff; 
text-decoration: underline;
}
#clearfooter {
height: 10px;
}
</style>
</head>

<body>
<div id="outer">
	<div id="header">
		<div id="leftheader">
		<img src="images/deronsizemorelogo.gif" alt="" title="deronsizemore.com logo" />
		</div>
			<div id="rightheader">
			<a href="">Home</a> | <a href="">About</a> | <a href="">Resume</a> | <a href="">Portfolio</a> | <a href="">Services</a> | <a href="">Contact</a></span>
			</div>
	</div>
		<div id="picheader">
		<img src="images/wavecrashing.jpg" alt="" title="wave crashing" />
		</div>
			<div id="content">
			<div id="title"><strong>Welcome to deronsizemore.com!</strong></div>
			<div id="paragraph"><p>Hi, I'm Deron.  If you couldn't tell by the name of the site, I am the designer/owner of deronsizemore.com.  Welcome to my little space on the web.  Feel free to browse around the site, I know there isn't much here right now, but I plan to add new stuff often, such as tutorials for those of you out there like myself who learn by doing, not by reading.  So check back often!</p></div>
			<div id="paragraph"><p>This site was for the most part designed with one purpose in mind, a place for me to showcase my abilities to possible employers.  If there is one thing that I have learned it is that if you cannot prove your abilities to an employer in the web design industry, you're probably not going to get hired for the job.  So I figured I would design a site to showcase what I have done, and what I'm capable of doing in hopes of landing that great career in web design that I am struggling to find.</p></div>
			<div id="paragraph"><p><strong>Do you need a website/logo/graphic?</strong> Check out the <a href="#">services</a> section of the site, I may be able to help and at a fraction of the cost of what some companies may have quoted you.</p></div>
			<div id="paragraph"><p>Feel free to <a href="#">contact</a> me at any time if you have a question about something you've seen on this website.  I will try to return your inquiry as soon as possible.</p></div>
			</div>
				<div id="clearfooter"></div>
				<div id="footer">
				All Content &copy; Deron Sizemore - 2004
				</div>
</div>
</body>
</html>

**deronsizemore** · Sep 13, 2004 15:08

anyone?

I had a similar post like this for a different site the other day and the fix was to make the footer position:absolute and then add a clearfooter div to keep content from overlapping footer. This I think is what I have done above but doesn't work?

**Paul O'B** · Sep 13, 2004 16:39

HI Deron,

You're nearly there

Just add position:relative to #outer to gain stacking context and the add bottom:0 to the footer.

Code:

#outer {
width: 700px;
background:red url(images/bg.gif) repeat-y left top;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
_height: 100%;
min-height: 100%;
margin: auto;
clear: both;
position:relative;
}
#footer {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 10px;
width: 501px;
margin-left: 98px;
border-top: 1px solid #9999ff;
text-align: center;
margin-top: 15px;
height: 15px;
position: absolute;
bottom:0;
}

There you go

paul

**deronsizemore** · Sep 13, 2004 17:29

thanks Paul. I still am leaning the whole position: relative, absolute, etc...don't know when or when not to use them.

**Paul O'B** · Sep 13, 2004 17:32

Have a look at the FAQ until it sinks in

User Tag List

Thread: background not extending...

Thread Tools

Display

background not extending...

Bookmarks

Bookmarks

Posting Permissions