Visit our site for information on various towns. However, we are facing an issue with the CSS when it comes to new or less populated towns like this one, where the footer is not aligning properly and leaving a large white gap below.
We attempted to implement a sticky footer method, but it didn't resolve the problem.
Below is the CSS code for the footer:
#footer-wrapper, #push {
height: 100px; /* .push must be the same height as .footer */
overflow:hidden;
}
#footer-wrapper {clear:both;width:100%;border-top:1px solid #323232;padding:20px 0 0;
background: #33383c;
background: #3F4952 url("/images/bg.jpg") repeat;
}
Regarding the contentwrapper:
#main-content {
margin: 0 5% -100px;
min-width:960px;
max-width:1137px;
overflow: hidden;
}
I suspect that the right/left nav equal column CSS might be causing this issue, as shown here:
.right-nav {
float: right;
width: 29.4%;
border-left: 1px solid #Dddddd;
padding-top:2em;
padding-bottom:10040px;
margin-bottom:-10000px;
}
If you have any suggestions or solutions, please let me know. Thank you!