Hi there!
Description: I have a page, with a container (div.display). The div for the main content of my page is called #main. For a long time I struggled to get this div expand automatically with content and push the footer down, the one day I got it! However, now that I've gone onto the next version of my website, I've somehow broken it.
What's happening is, the #main div is expanding with content, however the .display class isn't. It always seems to stop about 100px before the #main div ends and for some reason, this is where the footer gets stuck. I have tried setting the container height to auto, 100% and not setting a height property in the css however it still does not expand.
Here is the code, if anyone has any idea I'd be so grateful! HTML
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
</head>
<body>
<div class="display">
<div id="header">
<div id="logo">
...
</div>
<div id="navigation">
<ul class="glossymenu">
<li class="current">...<b>Home</b></a></li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
<div id="login" align="center">
...
</div>
</div> <!--END OF HEADER-->
<div id="main">
<div id="intro" align="center">
...
</div>
<div id="interested">
<div id="quote1">
...
</div>
<div id="buttons">
...
</div>
</div>
<div id="homeFeatures">
...
</div>
<div id="homePricing">
...
</div>
</div>
<!--End of Main-->
<div id="footer">
<div class="footerContent">
<div id="contactUs" class="footerClass">
...
</div>
<div id="community" class="footerClass">
...
</div>
<div id="sitemap" class="footerClass">
...
</div>
<div id="navWrap">
<div id="clientScroll">
<div id="scroller">
</div>
</div>
</div>
</div><!--END OF FOOTERCONTENT-->
</div>
<!--END OF FOOTER DIV-->
</div><!--END OF DISPLAY DIV-->
</body>
</html>
And here is the CSS:
@charset "utf-8";
/* CSS Document */
html, body{height:100%;}
html,body {margin:0;padding:0}
body,td,th {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #000;
}
body {
background-color: #FFF;
}
a {
font-size: 14px;
color: #333399;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: bfce24;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
}
h1 {
font-family: Georgia;
font-size: 40px;
color: #000;
}
h2 {
font-family: Georgia;
font-size: 30px;
color: #000;
}
h3 {
font-family: Georgia;
font-size: 20px;
color: #000;
}
.header
{
background-repeat: no-repeat;
background-color: #f7f7f7;
height: 100px;
width: 100%;
}
.display {
/*position: relative;
margin-left: auto;
margin-right: auto;
width: 100%;
top: 0px; */
position: absolute;
left: 0%;
width: 100%;
}
#logo
{
position: absolute;
top: 20px;
left: 100px;
}
#navigation
{
position:relative;
top:90px;
}
#main
{
position:relative;
top: 100px;
left: 100px;
width: 1000px;
}
#footer
{
background-color: #5956a9;
background-repeat:no-repeat;
position: relative;
height:250px;
width: 100%;
}
.footerClass
{
font-size:14px;
color:#FFF;
}
.footerClass a
{
font-size: 14px;
color: #FFF;
}
.footerClass a:hover
{
text-decoration: underline;
font-size: 14px;
color: #bfce24;
}
.footerClass a:visited
{
font-size: 14px;
color: #bfce24;
}
.footerClass h1
{
color:#fff;
font-size:24px;
}
#contactUs
{
position:absolute;
left: 10px;
}
#community
{
position:absolute;
left: 800px;
}
#sitemap
{
position:absolute;
top: 170px;
left: 320px;
}
#login
{
position: absolute;
top: 18px;
left: 1000px;
}
#mainFeatures
{
position: relative;
top: 35px;
height:auto;
}
#intro
{
position: relative;
height:auto;
}
#interested
{
position: relative;
width: 1000px;
padding-top: 10px;
}
#quote1
{
position: relative;
float: left;
}
#buttons
{
position: relative;
float: right;
}
#homeFeatures
{
position: relative;
top: 20px;
}
#homePricing
{
position: relative;
padding-top: 20px;
}