Trying to recreate Google homepage (HTML/CSS), Can't get footer to stay at bottom -
keep getting (red footer bar) advice on getting rid of it? saw code online keep footer @ bottom, tried keeps appearing @ middle of screen. project trying copy of google (no need functioning search). first time attempting this, bit lost.
the red footer (covering search bar)
<body> <div id="wrapper"> <div id="trio"> <div class="triple" id="you"> <a href="google.com">+you</a> </div> <div class="triple" id="gmail"> <a href="gmail.com">gmail</a> </div> <div class="triple" id="images"> <a href="google.com">images</a> </div> </div> <img src="https://www.google.com/images/srpr/logo11w.png"> <div id="search"> <input class="searchbar" type="text" maxlength="2048" value="say "ok google""> </div> <div id="buttons"> <input id="googlesearch" value="google search"type="submit"> <input id="secondbutton" value="i'm feeling lucky" type="submit"> </div> <div id="footer"> <div> </div> </body>
img { display:block; width:269px; height:95px; margin: auto; margin-top: 80px; padding-top: 112px; } .triple { font-family: arial; font-size: 13px; display: inline-block; margin-right:0; } #trio { text-decoration:none; color: #404040; ; } #trio a:hover { text-decoration: underline; } #gmail, #images { padding-left: 15px; } #search { width: 400px; height:28px; margin:auto; padding-top:30px; text-align: right; } .searchbar { margin:auto; display:block; width:100%; text-align: right; } #buttons { height:22; width:250px; margin:auto; display:block; } #wrapper { min-height:100%; position: relative; } #footer { position:absolute; bottom:0; width:100%; height:60px; background-color: red; clear:both; display:block; }
you missing in order min-height:100%; applied #wrapper work, should apply :
body,html{ height:100%; }