I'm having a problem where each page has a seemingly different amount of spacing above the footer. It can be seen at Click Here
Any thoughts/ideas as to what div is causing this issue and how to fix it so the pages aren't as long and have the same spacing above the footer? Thanks in advance!!
I beleive your problem is that you set a height & min-height on the "side-column" div.
#side-column {
float: left;
width: 235px;
height: 460px;
min-height: 460px;
background-color: #ffffff;
background-image: url(images/sidebar-bg.jpg);
background-repeat: no-repeat;
border-right: 1px solid #dadada;
}
I removed the height & min height from the div, yet it just left a white space beneath the column itself, and had no effect on the overall length of the page.
I see that you took care of that. I now see that your container ID has margin-bottom property set to 225px.
#container {
min-height:100%;
margin: auto;
width: 930px;
margin-bottom: 225px;
position: relative;
-moz-box-shadow:0px 0px 10px 1px #777777;
-webkit-box-shadow:0px 0px 10px 1px #777777;
box-shadow:0px 0px 10px 1px #777777;
}
Make sure that you are keeping a backup of the changes you are making. You have quite a bit of CSS and I am not going through them one by one so its important that you have the ability to roll back as you troubleshoot. I am only pointing out items that seem to add extra space/padding/margins, etc...
Thank you for taking a look at the CSS. I wondered myself if the 225px margin was causing the issue, but the footer div is -225px to keep the footer at the bottom. So at this point, I am at a loss to what is extending the main content div.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.