html - Creating a footer that stays at the bottom of the page -
i have went through countless methods on answered questions. believe followed 1 (http://www.cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/) t still cannot footer stay @ bottom of page. know has been asked countless times don't adjust code. appreciated.
here code:
html
<body> <div id="wrapper"> <header> <div class="logo"><a href="index.html"><img src="http://i.imgur.com/ewlyoiy.png"/></a></div> <div class="chapter-logo"><a><img src="http://i.imgur.com/rpivgdd.png"/></a></div> </header> <nav> <ul class="menu"> <li><a href="index.html">home</a> <li class="dropdown"><a href="">about ▾</a> <ul class = "sub-menu"> <li><a href="history.html">history</a> </li> <li><a href="brothers.html">brothers</a> </li> </ul> <li class = "dropdown"><a href="">philanthropy ▾</a> <ul class="sub-menu"> <li><a href="kovacs.html">kovacs color run</a> </li> <li><a href="greekgod.html">greek god</a> </li> </ul> <li><a href="membership.html">membership</a> <li><a href="contact.html">contact</a> </ul> </nav> <div class="index"> <div class ="letter"> <p><b><br>welcome official website new york iota chapter of phi kappa psi @ binghamton university! here able learn us, , brief introduction greek life @ binghamton. if have questions or want learn more information, feel free contact @ time.</b></br> <br><b><font color ="#22674a">carl hashem (chapter president)</b></font></br> </div> </div> <div class = "news-section"> <table class ="news"> <tr> <td class ="social"> <h4 align="center">connect</h4> <a href ="http://instagram.com/phipsibing"><img src="http://i.imgur.com/1ghbsoj.png"/></a> <a href="https://twitter.com/phi_psi_bing"><img src="http://i.imgur.com/oawojtc.png"/></a> <a href="https://www.facebook.com/phipsi.sociallist?fref=ts"><img src="http://i.imgur.com/2datax3.png"/></a> </td> <td class = "greekgod"> <h4 align = "center">greek god</h4> <p align="center">on october 18th 2014, brother anthony leighton representing in years greek god competition. proceeds go elizabeth glazier pediatric aids foundation.</p> <a href="https://www.payitsquare.com/collect-page/46106"><div class="donate-button"> <p>donate!</p> </div></a> </td> <td class = "kovacs"> <h4 align="center">kovacs color run</h4> <p align="center">the 5th annual steve kovacs color run take place on october 19th 2014. proceeds split between fairview recovery center , childhood development center.</p> <a href="https://www.payitsquare.com/collect-page/41430"><div class="sign-up"> <p>sign up!</p> </div></a> </td> </tr> </table> </div> <div class = "footer"> <p>© phi kappa psi ny iota chapter. rights reserved.</p> </div> </div> </body> css
html { height:100%; margin:0; padding:0; } #wrapper { min-width:1000px; min-height:100%; position:relative; } body { margin:0; padding:0; height:100%; } header { height:100px; width:100%; background:black; margin:0 auto; } .logo{ padding-left:10px; float:left; padding-top:5px; } .chapter-logo { float:right; padding-top:15px; padding-right:10px; } /* start menu styling*/ .menu{ margin:0 auto; padding:0 ; text-align:center; clear:both } ul.menu { background-image: -o-linear-gradient(bottom, #acb5b5 0%, #e2f0ea 100%); background-image: -moz-linear-gradient(bottom, #acb5b5 0%, #e2f0ea 100%); background-image: -webkit-linear-gradient(bottom, #acb5b5 0%, #e2f0ea 100%); background-image: -ms-linear-gradient(bottom, #acb5b5 0%, #e2f0ea 100%); background-image: linear-gradient(to bottom, #acb5b5 0%, #e2f0ea 100%); height: 40px; width: 100%; border-left:solid 1px #22674a; white-space: nowrap; text-align:center; } ul.menu > li { position: relative; display:inline-block; list-style:none; text-align:center; width:20%; border-style:1px #22674a; font-family: "open sans", sans-serif; font-weight:700; } /*sub menu styling*/ ul.menu li:first-child { border-left:none; } ul.menu ul li:first-child { border-bottom:solid 1px #22674a; } ul.menu ul li:nth-child(2) { border-bottom:solid 1px #22674a; } ul.menu ul li:last-child{ border-bottom:none; } ul.menu ul li { border:none; } ul.menu ul { background-image: -o-linear-gradient(bottom, #e2f0ea 0%, #acb5b5 100% ); background-image: -moz-linear-gradient(bottom, #e2f0ea 0%, #acb5b5 100% ); background-image: -webkit-linear-gradient(bottom, #e2f0ea 0%, #acb5b5 100%); background-image: -ms-linear-gradient(bottom, #e2f0ea 0%, #acb5b5 100%); background-image: linear-gradient(to bottom, #e2f0ea 0%, #acb5b5 100% ); position: absolute; padding:0; border-left:none; border:solid 1px #22674a; width:100%; text-align:center; display:none; } ul.menu { cursor: pointer; display: block; color: #22674a; line-height: 40px; text-decoration:none; font-weight:bold; border-left:solid 1px #22674a; } ul.menu li { list-style: none; } /* end menu styling */ /* banner styling*/ .index { height:400px; background-image: url("http://i.imgur.com/ri05og7.jpg"); background-repeat:no-repeat; background-size:100% 400px; } .letter{ width:460px; height:250px; margin-left:20px; line-height:1.75em; font-family:"open sans", sans-serif } h4 { color:#22674a; font-family:"open sans", sans-serif; font-weight:700; } /*end of banner styling*/ /*news styling*/ .news { width:1000px; } .news-section { padding-bottom:50px; } .greekgod { width:300px; height:220px; border:solid 1px black; text-align:center; background-image: -o-linear-gradient(bottom, #e2f0ea 0%, #acb5b5 100% ); background-image: -moz-linear-gradient(bottom, #e2f0ea 0%, #acb5b5 100% ); background-image: -webkit-linear-gradient(bottom, #e2f0ea 0%, #acb5b5 100%); background-image: -ms-linear-gradient(bottom, #e2f0ea 0%, #acb5b5 100%); background-image: linear-gradient(to bottom, #e2f0ea 0%, #acb5b5 100% ); padding:5px 5px 5px 5px; line-height:1.5em; font-family:"open sans", sans-serif; float:left; margin-right:30px; } .donate-button { width:150px; height:40px; border:3px solid black; background:#22674a; border-radius:5px; color:white; text-align:center; padding-top:7px; text-decoration:none; margin-left:65px; margin-bottom:10px; font-family:"open sans", sans-serif } .kovacs { width:300px; height:220px; border:solid 1px black; float:left; background-image: -o-linear-gradient(bottom, #e2f0ea 0%, #acb5b5 100% ); background-image: -moz-linear-gradient(bottom, #e2f0ea 0%, #acb5b5 100% ); background-image: -webkit-linear-gradient(bottom, #e2f0ea 0%, #acb5b5 100%); background-image: -ms-linear-gradient(bottom, #e2f0ea 0%, #acb5b5 100%); background-image: linear-gradient(to bottom, #e2f0ea 0%, #acb5b5 100% ); text-align:center; margin: 0 auto; line-height:1.5em; padding:5px; padding-bottom:10px; font-family:"open sans", sans-serif } .sign-up { width:150px; height:40px; border:3px solid black; background:#22674a; border-radius:5px; color:white; text-align:center; padding-top:7px; text-decoration:none; margin-left:65px; font-family:"open sans", sans-serif } .social{ float:left; border:solid 1px black; position:relative; text-align:center; width:300px; height:220px; margin-right:30px; background-image: -o-linear-gradient(bottom, #e2f0ea 0%, #acb5b5 100% ); background-image: -moz-linear-gradient(bottom, #e2f0ea 0%, #acb5b5 100% ); background-image: -webkit-linear-gradient(bottom, #e2f0ea 0%, #acb5b5 100%); background-image: -ms-linear-gradient(bottom, #e2f0ea 0%, #acb5b5 100%); background-image: linear-gradient(to bottom, #e2f0ea 0%, #acb5b5 100% ); padding:5px; font-family:"open sans", sans-serif } .social { padding:20px; } .social h4 { padding-bottom:20px; padding-top:none; } .footer { height:50px; width:100%; position:absolute; background-color:black; bottom:0; left:0; } .footer p { text-align:center; color:white; font-size:13px; font-family:"open sans", sans-serif; padding-top:15px; } fiddle
try changing layout inspected , might have caused it. try instead, move footer div outside of wrapper div on same label
you can use position: fixed make stick there want.
<div id="wrapper"> </div> <div class = "footer"> <p>© phi kappa psi ny iota chapter. rights reserved.</p> </div> and in css
div#wrapper { margin-bottom: 50px; } that should solve it.
sorry can't format using mobile here.
Comments
Post a Comment