html - Sticking CSS footer on bottom -
i can't seem footer stick on bottom despite trying numerous methods searched for.
basically have header @ top box shadow separating rest of page , want same @ bottom, content in middle, ideas doing wrong? have tried position fixed, bottom 0 can't box shadow show using methods or keep centered.
thanks!
html { overflow-y: scroll; } body { margin: 0; background-color: #ffffff; font-family: 'ubuntu', sans-serif; } div { display: block; } .header-wrapper { -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .container { margin-right: auto; margin-left: auto; width: 940px; } .container:before, .container:after { display: table; line-height: 0; content: ""; } #header { height: 60px; padding: 20px 0 25px 0; } #header .logo { float: left; } #header .logo { display: block; width: 270px; height: 60px; text-indent: -999em; line-height: 60px; background: url(/test/_assets/img/header-logo.png) no-repeat 0px 1px; background-size: 270px 60px; } #header .american-flag { display: block; float: right; } #header .american-flag img { max-height: 60px; } #content { height: 100%; padding: 20px 0 0 0; } body { color: red; text-decoration: none; } body a:hover { text-decoration: underline; } .footer-wrapper { -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } #footer { line-height: 60px; height: 60px; }<html> <body> <div class="header-wrapper"> <div class="container" id="header"> <div class="logo"> <a href="/">url</a> </div> <div class="american-flag"> flag </div> </div> </div> <div class="container" id="content"> site content </div> <div class="footer-wrapper"> <div class="container" id="footer"> footer </div> </div> </body> </html>
i have applied ryan fait's sticky footer markup.
html, body { height: 100%; } html { overflow-y: scroll; } body { margin: 0; background-color: #ffffff; font-family: 'ubuntu', sans-serif; } div { display: block; } .wrap { min-height: 100%; margin-bottom: -60px; } .header-wrapper { -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .container { margin-right: auto; margin-left: auto; width: 940px; } .container:before, .container:after { display: table; line-height: 0; content: ""; } #header { height: 60px; padding: 20px 0 25px 0; } #header .logo { float: left; } #header .logo { display: block; width: 270px; height: 60px; text-indent: -999em; line-height: 60px; background: url(/test/_assets/img/header-logo.png) no-repeat 0px 1px; background-size: 270px 60px; } #header .american-flag { display: block; float: right; } #header .american-flag img { max-height: 60px; } #content { height: 100%; padding: 20px 0 0 0; } body { color: red; text-decoration: none; } body a:hover { text-decoration: underline; } .footer-wrapper { -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } #footer { line-height: 60px; height: 60px; }<div class="wrap"> <div class="header-wrapper"> <div class="container" id="header"> <div class="logo"> <a href="/">url</a> </div> <div class="american-flag"> flag </div> </div> </div> <div class="container" id="content"> site content </div> </div> <div class="footer-wrapper"> <div class="container" id="footer"> footer </div> </div>
Comments
Post a Comment