css - Footer Not floating on bottom -
i'm having trouble putting sticky footer onto site i'm working on. i've tried , can't think of problem be.if take @ coding id appreciate it.
as content on site going small paragraphs need sticky footer stick bottom stop floating in middle of site. have content in div on laps image , id footer float on bottom. when close divs can't footer stay @ bottom, starts floating under image banner. ive tried position:fixed; don't want overlaps content. thanks
html
<!doctype html> <html><head> <meta charset="utf-8"> <title>linear partners</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=yes" /> <meta name="viewport" content="initial-scale=1, maximum-scale=2" /> <link href="style1.css" rel="stylesheet" /> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="js/modernizr.js"></script> <script src="js/respond.min.js"></script> <script src="js/prefixfree.min.js"></script> <script type='text/javascript' src='js/main.js'></script> <script> $(document).ready(function() { $('#menu-toggle').click(function () { $('#menu').toggleclass('open'); e.preventdefault(); }); }); </script> </head> <body> <div id="wrap"> <div id="mainpage"> <div id="header"> <img src="images/linear.partners.logo.png" width ="173" height="65" alt="logo"> <nav class="nav clearfix"> <a id="menu-toggle" class="anchor-link" href="#"><img src="images/3lines.png" width ="31" height="25"></a> <ul class="simple-toggle" id="menu"> <li><a href="#">home</a></li> <li><a href="#">about</a> <ul> <li><a href="#">team</a></li> </ul> </li> <li><a href="#">expertise</a></li> <li><a href="#">research</a></li> <li><a href="#">best practice</a></li> <li><a href="#">join our team</a></li> <li><a href="#">contact</a></li> </ul> </nav> </div> <div id="bg-image"style="background-image:url(images/slide1.jpg); background-position:50% 50%;"> <div id="main" class="wrapper clearfix"> <left> <h1>privacy policy</h1> <p>linear partners required law comply uk , european data protection legislation. committed ensuring employees comply acts in order maintain confidentiality of personal data.</p> </left> <right> <h1>privacy policy</h1> linear partners required law comply uk , european data protection legislation. committed ensuring employees comply acts in order maintain confidentiality of personal data.</right> </div> </div> <div class="clear"></div> <footer> <div id="footer-wrapper"> <div id="footer-content"> <div class="copyright"> copyright © 2014 linear partners. rights reserved. </div> <div class="footer-nav"> <a href="index.html">home</a> <a href="privacy.html">privacy</a> <a href="diversity.html">diversity policy</a> </div> </div> </div> </footer> <!-- #end footer area --> </body> </html> css
html, body { height: 100%; margin: 0; padding: 0; } body { margin:0; padding:0; background: #fff; font: 13px'helvetica', ariel, sans-serif; color: #000; } /*header*/ #header { position:relative; width:autopx; max-width:950px; height:65px; margin: 0 auto; z-index:10000; background: #fff; padding:20px; } #wrap {min-height: 100%;} #mainpage { padding-bottom: 85px;} /* must same height footer */ .footer {position: relative; margin-top: -85px; /* negative value of footer height */ height: 85px; clear:both;} /* nav */ .nav { width:autopx; float:right; padding-top:22px; } ul.simple-toggle { list-style:none; padding: 0px; margin: 0px; text-align: center; } ul.simple-toggle li { display: inline-block; text-align: center; border-right: 1px solid #cfcfcf; } ul.simple-toggle li:last-child { border-right: none; } ul.simple-toggle li { display: block; padding-left: 10px; padding-right: 10px; padding-top: 5px; padding-bottom: 5px; color:#000; text-decoration:none; } .anchor-link { display: none; background-color: #16447b; margin-top: -10px; float: right; height:40px; width:40px; } .anchor-link img { margin:9px 6px 0px 4px ; } #mobile-nav { display:none; } nav ul ul { display: none; } nav ul li:hover > ul { display: table-cell; text-align: center; vertical-align: middle; } nav ul { list-style: none; position: relative; display: inline-table; } nav ul li:hover { background: #16447b; color: #fff; } nav ul li:hover { color: #fff; } nav ul ul { background: #092a55; padding:0px; margin:0px; position: inherit; top: 100%; } nav ul ul:hover { background: #6689b3; } /*wrapper*/ #bg-image { z-index:-5780000; float: left; width: 100%; height:250px; background-size:cover; margin-top:2px; border: 2px solid #16447b; border-width: 2px 0; border-color: #fff; box-shadow: 0 2px 0px #16447b, 0 -2px 0px #16447b; } .wrapper { width:90%; max-width: 910px; margin: auto; margin-top:125px; padding:20px; background: #fff; height:150px; } #main left{ background-color: #fff; width: 62.5%; float: left; } #main right { background-color:#fff; width: 35%; float: right; } /*footer*/ #footer-wrapper { height:65px; margin: 0 auto; background: #000; padding:20px; } #footer-content { height:65px; max-height:120px; position:relative; width:100%; max-width:950px; margin: 0 auto; margin-top:20px; color: #fff; } .copyright { margin-top:5px; float:left; color: #fff; text-decoration:none; } .footer-nav { margin-top:5px; float:right; color: #fff; text-decoration:none; margin-right:-6px; } .footer-nav { color: #fff; padding-left:6px; padding-right:5px; border-right: 1px solid #fff; text-decoration:none; float: left; } .footer-nav a:last-child { border:none; } .footer-nav a:hover { text-decoration:underline; } .clear { clear:both; } /*media*/ @media (max-width:750px){ ul.simple-toggle { display: none; } .anchor-link, #mobile-nav { display: block; } ul.open { background-color: #16447b; display: block; list-style: none outside none; margin: 0; padding: 0; position: absolute; right: 20px; top: 100%; width: 175px; z-index: 50000; opacity:0.90; } ul.open ul { background-color: #092a55; display: none; list-style: none outside none; margin: 0; padding: 0; position: relative; top: 100%; width: 175px; z-index: 50000; } ul.open li { display: block; list-style: none; text-align: center; border: none; } ul.open li { display: block; padding: 10px 5px; border-bottom: 0px solid #5578a4; color: #fff; } ul.open li a:hover { background-color: #375d8f; color: #fff; } .wrapper { width:85%; max-width: 910px; margin: auto; margin-top:125px; padding:20px; background: #fff; height:250px; } #main left{ background:#fff; width: 62.5%; float: left; } #main right { background:#fff; width: 35%; float: right; } .copyright { position:absolute; left:0px; top:-10px; font: 11px'helvetica', ariel, sans-serif; } .footer-nav { position:absolute; left:-6px; top:10px; font: 11px'helvetica', ariel, sans-serif; } } @media (max-width:480px){ img[src*="images/linear.partners.logo.png"] { margin-top:13px; height:40px; width:106px; } .bg-image { float: left; width: 100%; height:150px; background-size:cover; } .wrapper{ width:80%; height:200px; margin-top:75px; } #main right { float: left; clear: left; margin: 0 0 10px; width: 100%; } #main left { float: left; clear: left; margin: 0 0 10px; width: 100%; } .copyright { position:absolute; left:0px; top:-10px; font: 11px'helvetica', ariel, sans-serif; } .footer-nav { position:absolute; left:-6px; top:10px; font: 11px'helvetica', ariel, sans-serif; } }
to avoid footer overlap content add margin content corresponding footer's height
.footer-nav{ //... position:fixed; bottom;0; height:50px; // example //... } .wrap{ margin-bottom:50px;// same .footer-nav height }
Comments
Post a Comment