I have tried all three sticky footer suggestions in the note at the top of the CSS Thread List; no luck with any of them due to the way my page is set up. I'm at a loss. My concern is that on monitors with larger resolutions, my footer does not stick to the bottom of the screen. I have been asked to fix it so I have to do it, and can't figure out how to do it since my footer is inside my wrapper. Help please!
http://www.skolnickcpa.com/indextest.html
<html>
<head>
<title>Skolnick|cpa - Home</title>
<link rel="stylesheet" href="main.css" type="text/css" media="screen" />
<meta name="verify-v1" content="kgBW89MvncrRSugvvDbZbfK3RAO8jAvB0mTc+IVZ4 z4="
/>
<meta name="Description" CONTENT="Skolnick CPA provides taxation, accounting,
and advisory services to businesses and individuals in the Raleigh, NC area
and far beyond." />
</head>
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Header -->
<div id="header">
<ul id="menu">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="login.html">Client Login</a></li>
</ul>
</div>
<!-- End Header -->
<!-- Begin Left Column -->
<div id="leftcolumn">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Etiam eleifend blandit nisl a ultricies. Phasellus ac tellus iaculis massa
elementum gravida sit amet vel risus. Aenean bibendum pretium tellus, quis
commodo nibh semper at. Integer sit amet arcu id quam tincidunt sagittis sit
amet condimentum nisl. Duis et diam vitae orci mattis tempor. Ut lectus elit,
consequat quis sagittis eu, laoreet at erat. Phasellus bibendum eleifend
nibh, ac consequat mi sodales nec. Etiam hendrerit, ipsum sed cursus
bibendum, mi dolor egestas enim, id volutpat tortor eros et elit. Nulla sit
amet urna ac arcu dictum porta bibendum non elit. Suspendisse non erat justo.
Donec quis enim vitae elit egestas rutrum a id felis. Sed ullamcorper lacus
sit amet erat scelerisque sollicitudin. Phasellus scelerisque mauris non nunc
egestas auctor. Morbi consectetur, dui quis tristique malesuada, neque leo
porta tortor, quis interdum tortor diam quis orci. </p>
</div>
<!-- End Left Column -->
<!-- Begin Right Column -->
<div id="rightcolumn">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Etiam eleifend blandit nisl a ultricies. Phasellus ac tellus iaculis massa
elementum gravida sit amet vel risus. Aenean bibendum pretium tellus, quis
commodo nibh semper at. Integer sit amet arcu id quam tincidunt sagittis sit
amet condimentum nisl. Duis et diam vitae orci mattis tempor. Ut lectus elit,
consequat quis sagittis eu, laoreet at erat. Phasellus bibendum eleifend
nibh, ac consequat mi sodales nec. Etiam hendrerit, ipsum sed cursus
bibendum, mi dolor egestas enim, id volutpat tortor eros et elit. Nulla sit
amet urna ac arcu dictum porta bibendum non elit. Suspendisse non erat justo.
Donec quis enim vitae elit egestas rutrum a id felis. Sed ullamcorper lacus
sit amet erat scelerisque sollicitudin. Phasellus scelerisque mauris non nunc
egestas auctor. Morbi consectetur, dui quis tristique malesuada, neque leo
porta tortor, quis interdum tortor diam quis orci.</p>
</div>
<!-- End Right Column -->
<!-- Begin Footer -->
<div id="footer">
<div id="footerleft">© 2009 Skolnick CPA, PLLC <br>All
rights reserved</div>
<div id="footerright">
<a href="contact.html">Contact</a> |
<a href="faq.html">FAQ</a> |
<a href="careers.html">Careers</a> |
<a href="resources.html">Resources</a> |
<a href="sitemap.html">Site Map</a>
</div>
</div>
<!-- End Footer -->
</div>
<!-- End Wrapper -->
</body>
</html>
* { padding: 0; margin: 0; }
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 80%;
line-height: 1.2em;
background-color:#666;
height:100%;
}
#wrapper {
margin: 0 auto -30px;
width: 820px;
border: 1px solid #333;
background-color:#fff;
overflow:hidden;
min-height:100%;
}
#push {
height:30px;
}
#header {
width: 822px;
float: left;
padding: 10px;
height: 116px;
margin: 0;
background:url(header.jpg) no-repeat;
}
#leftcolumn {
color: #666;
background:url(leftslice.jpg) no-repeat;
margin: 0;
padding: 10px 30px 10px 30px;
min-height: 384px;
width: 198px;
float: left;
}
#rightcolumn {
color: #666;
float: left;
background:url(rightslice.jpg) repeat-x;
margin: 0;
padding: 10px 30px 10px 30px;
min-height: 384px;
width: 502px;
display: inline;
}
#footer {
width: 820px;
min-height:50px;
clear: both;
color: #333;
background-color:#c4bca4;
font-size: 85%;
line-height: 1.2em;
border-top: 1px solid #333;
}
#footerleft {
width: 198px;
padding: 10px 30px 10px 30px;
float: left;
background-color:#c4bca4;
}
#footerright {
width: 502px;
padding: 10px 30px 10px 30px;
float:left;
background-color:#c4bca4;
}
#footer a{
text-decoration:none;
color:#84693b;
font-weight:bold;
}
#footer a:hover,#footer a:active {
text-decoration:none;
color:#ffffff;
font-weight:bold;
}
ul#menu {
list-style:none;
padding-left:290px;
text-align:center;
width:100%;
}
ul#menu li {
margin:0px; padding:0px;
float:left;
list-style:none;
font-size:12pt;
line-height:1em;
display:inline;
}
ul#menu li a {
display:block;
text-align:center;
margin-top:99px;
margin-right:20px;
color:#666;
font-weight:bold;
text-decoration:none;
padding:3px 20px;
}
ul#menu a:hover,#footer a:active {
text-decoration:none;
color:#fff;
font-weight:bold;
}
- it can leave looooooooong empty spaces.
