Hello all - I am experiencing a weird issue that I can't seem to wrap my head around. My website i am developing is located @ http://steelcitydevstudios.com/dev/ise/login.php the footer is the main issue - when you go to the page you will notice the contents of the footer (used bootstrap for framework) are absolutely positioned and move up and down with the page scroll. I really need the contents to act as the bg of the footer and stay at the bottom (ie - if the page is longer than actual viewport of the browser, then the footer will NOT be shown). code (HTML /PHP) <?php function displayFooter() { ?> </div> <footer> <div class="navbar navbar-fixed-bottom footer"> <div class="container-fluid"> <div class="row-fluid"> <div class="col-xs-6 col-md-4 col-lg-3"> <ul> <li><a href="news.php">News</a></li> <li><a href="press.php">Press</a></li> <li><a href="contactus.php">Contact Us</a></li> <li><a href="privacy.php">Privacy</a></li> <li><a href="terms.php">Terms Of Use</a></li> </ul> </div> <div class="col-xs-6 col-md-4 col-lg-3"> <h2 class="twitterfooter">Tweets</h2> <!-- TODO - ADD FOOTER APP FOR RECENT TWEETS HERE --> </div> <div class="col-xs-6 col-md-4 col-lg-3"> <h2>We Accept</h2> <ul class="payment-logos"> <li class="visa">Visa</li> <li class="mc">Mastercard</li> <li class="disc">Discover</li> <li class="amex">AMEX</li> </ul> </div> <div class="col-xs-6 col-md-4 col-lg-3"> <div id="newsletter"> TODO - add newsletter integration </div> </div> </div> </div> <small>Copyright © <?php echo date('o')?> Information Security Education. All Rights Reserved. <span> Website Engineered by <a href="www.steelcitydev.com"><img src="/dev/ise/images/scd.png" alt="Steel City Developers, llc" width="32" height="12"/></a></span></small> </div> </footer> and CSS footer { position: absolute; bottom: 0; width: 100%; height: 355px; background: url(/dev/ise/images/footer-bg.png); background-repeat: repeat; } footer span { background: rgba(34, 34, 34, 1); /* Old browsers */ background: -moz-linear-gradient(top, rgba(34, 34, 34, 1) 0%, rgba(71, 71, 71, 1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(34, 34, 34, 1)), color-stop(100%,rgba(71, 71, 71, 1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(34, 34, 34, 1) 0%,rgba(71, 71, 71, 1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(34, 34, 34, 1) 0%,rgba(71, 71, 71, 1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(34, 34, 34, 1) 0%,rgba(71, 71, 71, 1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(34, 34, 34, 1) 0%,rgba(71, 71, 71, 1) 100%); /* W3C */ filter: progidXImageTransform.Microsoft.gradient( startColorstr='rgba(34, 34, 34, 1)', endColorstr='rgba(71, 71, 71, 1)',GradientType=0 ); /* IE6-9 */ width: 100%; left: 0; bottom: 0; position: absolute; height: 70px; border-top: 3px solid rgba(79, 79, 79, 1); } h2.oursite-logo { text-indent: -999em; background: url('/dev/ise/images/oursite-logo.png'); background-repeat: no-repeat; margin-left: 40%; height: 85px; position: relative; bottom: 130px; } .footer-menu { position: absolute; width: 100%; } .footer-menu > ul { position: absolute; width: 100%; margin-left: 43%; bottom: 30px; } .footer-menu > ul > li > a { font-family: 'Asap', sans-serif; font-size: .85em; color: rgba(77, 77, 77, 1); } .footer-menu > ul > li > a:hover{ color: rgba(255, 255, 255, 1); } any ideas on how I can accomplish my goal? Thank you all in advance!
1) do yourself a favor and forget bootcrap, the only thing you can learn from it is how NOT to write HTML. Go find a stick and scrape that off before you smear it all over the web's carpets. 2) Absolute positioning of major flow elements is most always a steaming pile of /FAIL/, particularly at the BOTTOM of the page. More so given the plethora of possible screen sizes. 3) if you have to nest child selectors that deep, you're probably doing something wrong. What you SHOULD likely be trying for is what's called a 100% min-height layout, so the footer is pushed off the screen when there isn't enough room but is fixed at the bottom of the display when it is not. The easiest way these days is to use flex-box -- won't work right in IE9/earlier, honestly at this point -- screw 'em. Oh noes, it's not stretched to the bottom in legacy IE, notz thats... :/ Generally speaking that page is filled with problems that as I keep telling people, "Toss it and start over" -- it would be faster to accomplish what you are trying to do than to try and salvage that typical train-wreck of non-semantic markup and presentational classes bootcrap has saddled you with. I mean you've got missing headings, gibberish use of numbered headings, that stupid malfing abuse of BUTTON outside a form with a bunch of scripttardery doing CSS' job, presentational images in the markup, no media targets on your stylesheet links, comment before the doctype (say hello to quirks mode)... It's a laundry list of how not to code a page; but laughably exactly what one can expect when HTML 5 meets bootcrap. Basically if you don't know what's wrong with this: <div class="row login"> <div class="col-md-7"> <div class="login-box"> <form class="login" name="loginForm" method="POST" action="/dev/ise/login/" novalidate="novalidate"> <div id="loging-logo"> <img class="login-logo" src="/dev/ise/images/logo.png" alt="Information Security Education" width="296px" height="62px"> <hr> <label class="login">Email:</label> <input type="text" name="email" id="email" placeholder="" required=""> <br> <label class="login">Password:</label> Code (markup): It's time to back away from the keyboard and learn something about HTML and CSS. ... and that's before we talk the illegible colour contrasts and fixed metric fonts. Looking at where you are so far, it shouldn't be too hard to 'correct' it and get rid of the bootcrap nonsense. You've got a fairly simple layout there -- right quick there's little reason for your markup to vary a whole lot from this: <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"> <meta name="viewport" content="width=device-width; height=device-height; initial-scale=1.0" > <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" > <title> Login - Information Security Education </title> </head><body> <div id="top"> <h1> <a href="/"> Information Security <span>Education</span> </a> </h1> <div id="mainMenu"> <a href="#mainMenu" class="showMenu"></a> <a href="#" class="hideMenu"></a> <ul> <li class="myaccount"><a href="/myaccount.php">My Account</a></li> <li class="certificates"><a href="/certificate.php">Certificates</a></li> <li class="training"><a href="/training.php">Training</a></li> <li class="dashboard"><a href="/dashboard.php">Dashboard</a></li> </ul> <!-- #mainMenu --></div> <!-- #top --></div> <div id="content"><div class="widthWrapper"> <form id="login" method="POST" action="/dev/ise/login/"> <h2>Log In</h2> <fieldset> <label for="loginEmail">Email:</label><br> <input type="text" name="email" id="loginEmail"><br> <label for="loginPass">Password:</label><br> <input type="password" name="password" id="loginPass"><br> <input type="submit" id="send" value="Sign In"> </fieldset> <div class="social"> <hr> <a href="#"><img src="/dev/ise/images/google-login.png" alt="Google Login"></a> <a href="#"><img src="/dev/ise/images/linkedin-login.png" alt="LinkedIn Login"></a> <!-- .social --></div> <div class="register"> <hr> <a href="/forgotpw.php" class="forgotPassword">Forgot Password?</a> New to ISE? <a href="register.php">Register</a> <!-- .register --></div> </form> <div id="loginWelcome"> <h2>Welcome Back!</h2> <p> We're glad to count you among the more than 2 million people who have used Information Security Education to complete over 1 million trainings and counting. <br> <br> Sign in to access the most efficient and throrough employee training on the market, get ready to have fun while training! </p> <!-- #loginWelcome --></div> <!-- .widthWrapper, #content --></div> <div id="footer"> <div id="ourSite"> <h2>Our Site</h2> <ul> <li><a href="news.php">News</a></li> <li><a href="press.php">Press</a></li> <li><a href="contactus.php">Contact Us</a></li> <li><a href="privacy.php">Privacy</a></li> <li><a href="terms.php">Terms Of Use</a></li> </ul> <!-- ourSite --></div> <div id="tweets"> <h2>Tweets</h2> <!-- TODO - ADD FOOTER APP FOR RECENT TWEETS HERE --> <!-- #tweets --></div> <div id="payments"> <h2>We Accept</h2> <ul> <li class="visa">Visa</li> <li class="mc">Mastercard</li> <li class="disc">Discover</li> <li class="amex">American Express</li> </ul> <!-- #payments --></div> <form id="newsletter" method="post" action="loginprocess.php"> <h2>Newsletter</h2> <fieldset> <label for="newsletterName">Name:</label><br> <input type="text" name="Name" id="newsletterName"><br> <label for="newsletterEmail">E-Mail Address:</label><br> <input type="text" name="Email" id="newsletterEmail"><br> <input type="submit" class="submit" value="Sign Up"> </fieldset> </form> <div id="disclaimer"> © 2015 Information Security Education. All Rights Reserved. <span> Website Engineered by <a href="www.steelcitydev.com"> <img src="/dev/ise/images/scd.png" alt="Steel City Developers, llc"> </a> </span> <!-- #disclaimer --></div> <!-- #footer --></div> </body></html> Code (markup): Which is basically a little under 2/3rds what you had there. I'm on the way out the door for a while this evening, but when I get back or maybe in the morning I can belt out some CSS to show you how I'd approach that with a proper min-height layout; most likely using flex-box... again, IE9/earlier users the footer won't go to the bottom, but their numbers are dwindling and the page should still at least WORK for them. (which is the important part). There are other methods that can work all the way back to IE5, but each has it's own set of... issues (like requiring the height of the footer to be fixed in size, or resorting to tables for layout) that we'd probably be better off avoiding. I know this analysis might seem a bit harsh, but I'm trying to be honest with you. You've been led down the garden path to failure by the mouth-breathing dumbass pile of manure known as bootcrap -- but you've got some good design sensibilities going on there so it's just a matter of showing you that bootcrap is actually making you write more code, work harder, and in general result in an inaccessible/buggy/broken result that WILL be broken for someone somewhere at sometime. I mean seriously, look at what a mess it's made of something this simple!