Footer keeps appearing in the middle of the page
Question
I am creating a web page with HTML and CSS, however, when I created the footer CSS it appears in the middle of the page. I've gone through w3Schools but I couldn't find anything on it.
The footer should be on the bottom of the page. However, it is in the middle. I'd like it to keep it on the bottom of the page as a footer should do. Would anyone know how to fix this issue?
I've attached my code below.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="description" content="The Dusty Garage"> <title> The Dusty Garage </title> <style> html, body { margin: 0; font-family: Arial, Helvetica, sans-serif, Verdana, Geneva, Tahoma, sans-serif; } #wrapper { margin: auto; width: 100%; max-width: 100%; } #navigationbar { clear: both; height: 50px; max-width: 100%; background-color: cornflowerblue; } #companyname { margin: 0; float: left; padding: 5px; font-size: 12px; text-decoration: none; } #companyname a { color: black; text-decoration: none; } nav { float: right; } nav ul { list-style: none; margin: 0; padding-left: 0; } nav ul li { color: #fff; display: block; float: left; padding: 1rem; border-right: 1px solid #bbb; position: relative; text-decoration: none; transition-duration: 0.5s; } nav ul li a { display: block; text-decoration: none; color: white; } nav ul li:hover, nav ul li:focus-within { background-color: royalblue; cursor: pointer; } nav ul li:focus-within a { outline: none; } nav ul li ul { background-color: cornflowerblue; visibility: hidden; opacity: 0; position: absolute; transition: all 0.5s ease; margin-top: 1rem; left: 0; white-space: nowrap; } nav ul li:hover>ul, nav ul li:focus-within>ul, nav ul li ul:hover, nav ul li ul:focus { visibility: visible; opacity: 1; display: block; } nav ul li ul li { background-color: cornflowerblue; width: 100%; display: inline-block; } nav li:last-child { border-right: none; } nav .active { background-color: black; } /* Navigation CSS End */ /* Banner Image CSS Start */ .hero { height: 70vh; display: block; justify-content: center; align-items: center; text-align: center; color: white; background-image: url(https://memberpress.com/wp-content/uploads/2015/06/Google-tools@2x-1.png); background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; } .hero>* { color: black; } .hero>h2 { font-size: 3rm; padding-bottom: 20rem; text-align: center; vertical-align: middle; } /* HERO IMAGE BANNER END */ /* START SECTION CSS FOR BROWSE AND SELL */ .browsesellarea { display: flex; flex-wrap: wrap; } /* Heading Style */ .browsesellarea-heading { position: absolute; margin-top: 0; } .browsesellarea-area { flex: 1 0 500px; box-sizing: border-box; border: 1px solid #ccc; box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3); margin: 3rem .5rem .5rem .5rem; padding: .1rem .1rem .1rem .1rem } .browsesellarea-area img { display: block; border: black; width: auto; height: 290px; padding: .1rem .1rem .1rem .1rem } /* END BROWSE-SELL CSS */ /* START FOOTER CSS */ .footer { display: flex; align-items: center; justify-content: center; background-color: cornflowerblue; color: white; margin: auto; } </style> </head> <body> <div id="wrapper"> <!---Contains Navigation and Logo--> <header> <div id="navigationbar"> <div id=companyname> <a href="#"> <h1>The Dusty Garage</h1> </a> </div> <nav> <ul> <li> <a href="#">Home</a> </li> <li> <a href="#BrowseTools">Browse Tools</a> <ul> <li> <a href="#BrowseTools">Browse Tools</a> </li> </ul> </li> </ul> </nav> </div> </header> <section class="hero"> <h2>Find the Perfect Tool</h2> </section> <main> <!---Contains Main Content--> <div class="goal-heading"> <h1>Our Aim</h1> </div> <p> The Aim of this project is to develop a peer to peer marketplace for used and new tools. Many people own tools they don't use anymore, so instead of gathering dust in the garage, this marketplace aims to give old tools a new lease on life. From garden to industrial tools, users can list tools they own for sale and make bids on other user's listed tools. Users can see a list of bidders and contact the user who has made the most appealing bid, for transaction outside the website. Once a sale has been made, all the seller needs to do is mark the item as sold .</p> <section class="browsesellarea"> <section class="browsesellarea-heading"> <h2>Looking for Tools?</h2> <div class="browsesellarea-area"> <img src="Images/2925.jpg" alt="Browse Tools to Buy" /> </div> <button>Browse Categories</button> <h2> Got a shed full of dusty tools?</h2> <div class="browsesellarea-area"> <img src="Images/10975.jpg" alt="Browse Tools to Buy" /> </div> <button>Sell Your Tools Here</button> </section> </section> </main> </div> <!-- FOOTER --> <footer class="footer"> <div> <p>Copyright © 2019</p> </div> </footer> </body> </html>
1 answers
solution1
0 ACCPTED 2019-08-27 03:33:10
Remove position: absolute from .browsesellarea-heading class. Because of this the footer is not coming on bottom
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
My footer isn't appearing at the bottom of the page but in the middle of the page
Footer floating in the middle of the page
Django footer is in middle of page
Footer stuck in middle of page
Footer floats to middle on the page
Center Footer in Middle of page
Bootstrap footer is in the middle of the page
Footer in the middle of the page
Footer shows up in the middle of the page?
Footer getting stuck on middle of the page
Related Tags