Trouble with css float on site

Question

Hello i am making a site http://guesthousecontrasts.com however for some reason the content div won't fill the whole page i believe that this is because of some floats i am using, another problem i have is that the content on some pages won't "push" the sticky footer down instead it stays above it, i tried adding clear-fixes to some of the div and adding a clear-fix div at the end of the pages however nothing seems to work so i am kind of lost. I would really appreciate all the help you guys can give and would love to hear any tips/advices/critics you might have.

Answer 1

width of .main div is 1000px; you can keep it whatever you want or 100%. But the banner image will not fit in that case. Use

#banner {
background: url(../images/bg_img2.jpg) 0 0 no-repeat;
padding: 30px 0 0 60px;
background-size: cover;
}

to adjust image according to width.

remove margin-bottom from .main-content

.main-content {
min-height: calc(100% - 107px); //100% minus 107px of footer
height:auto !important;
margin:0 auto;
}

this will solve your footer overlapping problem.