I set a white footer of 30px height on my webpage. For some reason when I scroll down the page the footer gets much higher than that and the text part (div with light grey background) overlap it.Would you know what's wrong and how to fix this?Jsfiddle is here:http://jsfiddle.net/Grek/AdX3m/Many thanksHere is a screenshot
CSS\[code\] @charset"UTF-8";/* CSS Document */body:before { content: ""; position: fixed; top: -10px; left: 0; width: 100%; height: 10px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); box-shadow: 0px 0px 10px rgba(0,0,0,.8); z-index: 100;}Html, body { padding: 0; margin: 0; height: 100%; font-family: 'Open Sans', sans-serif;}#header { width: 100%; height: 60px; border-bottom: 1px dotted #CCC; background: #F2F2F2;}#logo { position: absolute; left: 20px; top: 35px; color: #000; font-size: 20px;}#header-text { width: 400px; position: absolute; top: 70px; left: 20px; font-size: 12px; font-weight:300; color: #FFF;}#wrap { min-height: 100%; height: 100%; position: relative; background: #0063C3; /* Old browsers */ background: -moz-linear-gradient(45deg, #0063C3 0%, #2E88C9 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #0063C3), color-stop(100%, #2E88C9)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(45deg, #0063C3 0%, #2E88C9 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(45deg, #0063C3 0%, #2E88C9 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(45deg, #0063C3 0%, #2E88C9 100%); /* IE10+ */ background: linear-gradient(45deg, #0063C3 0%, #2E88C9 100%); /* W3C */ filter: progidXImageTransform.Microsoft.gradient( startColorstr='#0063C3', endColorstr='#2E88C9', GradientType=1 )}#footer { position: fixed; /* Force it to stick to the bottom*/ width: 100%; bottom: 0; height: 30px; background: #fff;}/* mainmenu */#mainmenu { width: 100%; /* min-height: 180px; */ padding-bottom: 20px; margin-top: -42px; /* padding-top: -42px; */ overflow: hidden;}#mainmenu ul { list-style: none; margin: 0; float: right; color: #000;}#mainmenu ul li { display: inline-block; float: left; width: 140px; line-height: 20px;}#mainmenu>ul>li { margin-left: 20px;}#mainmenu ul li a { font-size: 12px; display: block; text-decoration: none;}#mainmenu ul li a, #mainmenu ul ul:hover li a { color: #fff; -moz-transition-property: all, -moz-transform; -moz-transition-duration: .4s, .4s, .4s, .4s; -moz-transition-timing-function: ease-out, ease-in, linear, ease-in-out; -ms-transition-property: all, -ms-transform; -ms-transition-duration: .4s, .4s, .4s, .4s; -ms-transition-timing-function: ease-out, ease-in, linear, ease-in-out; -o-transition-property: all, -o-transform; -o-transition-duration: .4s, .4s, .4s, .4s; -o-transition-timing-function: ease-out, ease-in, linear, ease-in-out; -webkit-transition-property: all, -webkit-transform; -webkit-transition-duration: .4s, .4s, .4s, .4s; -webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out; transition-property: all, transform; transition-duration: .4s, .4s, .4s, .4s; transition-timing-function: ease-out, ease-in, linear, ease-in-out;}#mainmenu ul ul li a:hover, #mainmenu ul ul li.current-menu-item a { color: #005EBC; -moz-transition-property: all, -moz-transform; -moz-transition-duration: .4s, .4s, .4s, .4s; -moz-transition-timing-function: ease-out, ease-in, linear, ease-in-out; -ms-transition-property: all, -ms-transform; -ms-transition-duration: .4s, .4s, .4s, .4s; -ms-transition-timing-function: ease-out, ease-in, linear, ease-in-out; -o-transition-property: all, -o-transform; -o-transition-duration: .4s, .4s, .4s, .4s; -o-transition-timing-function: ease-out, ease-in, linear, ease-in-out; -webkit-transition-property: all, -webkit-transform; -webkit-transition-duration: .4s, .4s, .4s, .4s; -webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out; transition-property: all, transform; transition-duration: .4s, .4s, .4s, .4s; transition-timing-function: ease-out, ease-in, linear, ease-in-out;}p { font-size: 13px; color: #fff; text-align:justify; font-weight:300;}h1 { font-size: 30px; color: #fff; /* display: inline-block; */ }H5 { text-transform: uppercase; margin-bottom: 5px;}div#content-left { float: left; width: 35%; background: lightblue;}div#content-right { float: right; width: 60%; padding-right: 50px; background:#ccc;}div#content-center { overflow: hidden;}\[/code\]HTML:\[code\]<!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>Document sans nom</title><link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'><link href="http://stackoverflow.com/questions/15720562/normalize.css" rel="stylesheet" type="text/css" /><link href="http://stackoverflow.com/questions/15720562/style.css" rel="stylesheet" type="text/css" /><script src="http://stackoverflow.com/questions/15720562/prefixfree.min.js"></script></head><body><div id="wrap"> <div id="header"></div> <div id="logo">My Name</div> <div id="mainmenu"> <ul> <li> <h5>Menu I</h5> <ul> <li><a title="" href="">Biography</a> </li> <li><a title="" href="">Publications</a> </li> </ul> <li> <h5>Menu 2</h5> <ul> <li><a title="" href="">Demo</a> </li> <li><a title="" href="">Features</a> </li> <li><a title="" href="">Comparison</a> </li> </ul> </li> <li> <h5>Menu 3</h5> <ul> <li><a title="" href="">Item 1</a> </li> <li><a title="" href="">Item 2</a> </li> <li><a title="" href="">Item 3</a> </li> </ul> </li> <li> <h5>Menu 4</h5> <ul> <li><a title="" href="">ddfd</a> </li> <li><a title="" href="">dsfd</a> </li> </ul> </li> </ul> </div> <!-- END DIV Main Menu --> <div id="header-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</div> <div id="content-left">column1</div> <div id="content-right"> <h1>Novitates autem si spem</h1> <p>Novitates autem si spem adferunt, ut tamquam in herbis non fallacibus fructus appareat, non sunt illae quidem repudiandae, vetustas tamen suo loco conservanda; maxima est enim vis vetustatis et consuetudinis. Quin in ipso equo, cuius modo feci mentionem, si nulla res impediat, nemo est, quin eo, quo consuevit, libentius utatur quam intractato et novo. Nec vero in hoc quod est animal, sed in iis etiam quae sunt inanima, consuetudo valet, cum locis ipsis delectemur, montuosis etiam et silvestribus, in quibus diutius commorati sumus.</p> <p>Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox interceperat casus, et Serenianus dignus exsecratione cunctorum, innoxius, modo non reclamante publico vigore, discessit.</p> <p>Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox interceperat casus, et Serenianus dignus exsecratione cunctorum, innoxius, modo non reclamante publico vigore, discessit.</p> <p>Ultima Syriarum est Palaestina per intervalla magna protenta, cultis abundans terris et nitidis et civitates habens quasdam egregias, nullam nulli cedentem sed sibi vicissim velut ad perpendiculum aemulas: Caesaream, quam ad honorem Octaviani principis exaedificavit Herodes, et Eleutheropolim et Neapolim itidemque Ascalonem Gazam aevo superiore exstructas.</p> <p>Itaque verae amicitiae difficillime reperiuntur in iis qui in honoribus reque publica versantur; ubi enim istum invenias qui honorem amici anteponat suo? Quid? Haec ut omittam, quam graves, quam difficiles plerisque videntur calamitatum societates! Ad quas non est facile inventu qui descendant. Quamquam Ennius recte.</p> <p>Itaque verae amicitiae difficillime reperiuntur in iis qui in honoribus reque publica versantur; ubi enim istum invenias qui honorem amici anteponat suo? Quid? Haec ut omittam, quam graves, quam difficiles plerisque videntur calamitatum societates! Ad quas non est facile inventu qui descendant. Quamquam Ennius recte.</p> <p>Itaque verae amicitiae difficillime reperiuntur in iis qui in honoribus reque publica versantur; ubi enim istum invenias qui honorem amici anteponat suo? Quid? Haec ut omittam, quam graves, quam difficiles plerisque videntur calamitatum societates! Ad quas non est facile inventu qui descendant. reque publica versantur; ubi enim istum invenias qui honorem amici anteponat suo? Quid? Haec ut omittam, quam graves, quam difficiles plerisque videntur calami Quamquam Ennius recte.</p> <p>Ultima Syriarum est Palaestina per intervalla magna protenta, cultis abundans terris et nitidis et civitates habens quasdam egregias, nullam nulli cedentem sed sibi vicissim velut ad perpendiculum aemulas: Caesaream, quam ad honorem Octaviani principis exaedificavit Herodes, et Eleutheropolim et Neapolim itidemque Ascalonem Gazam aevo superiore exstructas.</p> <p>Itaque verae amicitiae difficillime reperiuntur in iis qui in honoribus reque publica versantur; ubi enim istum invenias qui honorem amici anteponat suo? Quid? Haec ut omittam, quam graves, quam difficiles plerisque videntur calamitatum societates! Ad quas non est facile inventu qui descendant. Quamquam Ennius recte. END END END</p> </div> <div id="footer">Test Footer</div> <!-- END DIV Footer --> </div><!-- END DIV Wrap --></body></html>\[/code\]