Description: I recently encountered an issue with the layout of my website. I have a main content div (#main) and a container div (.display), which should expand automatically with content to push the footer down. Initially, I struggled to get this working but eventually succeeded. However, after updating my website, I seem to have broken this functionality.
The problem I'm facing now is that while the #main div expands correctly with content, the .display class doesn't. It stops about 100px before the end of the #main div, causing the footer to get stuck in that position. I've tried adjusting the height property of the container in various ways in the CSS, such as setting it to auto or 100%, but nothing seems to make it expand properly.
If anyone has any insights on how to fix this issue, I would greatly appreciate the help! 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: 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;
}