+ 1

How to keep the footer at the bottom of the page?

Here is the CSS I am using, yet the footer is overlaying the article part. Help please. html { position: relative; min-height: 100%; } header { background-color: rgb(18, 25, 35); position: absolute; height: 50px; padding: 5px; left: 0; right: 0; top: 0; } .header-title { position: absolute; top: 0; right: 0; left: 0; height: 50px; background-color: rgb(18, 25, 35); } section { position: absolute; top: 60px; left: 0; right: 0; } footer { position: absolute; background-color: rgb(18, 25, 35); color: white; height: 40px; padding: 5px; right: 0; bottom: 0; left: 0; } h1, h2 { color: white; text-align: center; margin: 10px; font-family: 'Revalia', cursive; } .banner { background-image: url(images/banner.jpg); padding: 20px; } article { position: absolute; background-color: rgb(224, 225, 226); color: black; left: 150px; right: 150px; padding: 15px; }

html5 css3 programming footer

12th Apr 2017, 2:05 AM

Aaron Quiat

5 Answers

+ 5

Why are you using position property? Remove position, left, top, bottom, and right properties. Instead use margin, float properties for controlling your layout <footer> should be the last section of your code. Try this ------------------------------------ HTML ------------------------------------ <!DOCTYPE html> <html> <head> <title> </title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="container"> <header> <h1>Header goes here </header>  <aside> <p>Links go here</p> </aside>  <section> <h1>Main content</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <br class="clearfloat"> </section>  <footer> <p>© 2017. Presented by Devender Mahajan</p> </footer>  </div>  </body> </html> CSS follows below

12th Apr 2017, 5:03 AM

देवेंद्र महाजन (Devender)

+ 5

------------------------- CSS - style.css -------------------------- body { background-color: #999; color: #000000; margin: 0; padding: 0; text-align: center; } #container { width: 80%; background-color: #c3c3c3; margin: 0 auto; padding: 0; text-align: left; } header { height: 125px; background-color: #333333; text-align: center; vertical-align: middle; color:#fefefe; margin: 0; padding: 0; } aside { float: left; margin-top: 10px; width: 12em; } section { background-color: #fff; margin-left: 12em; padding: 10px 20px 0 1em; } .clearfloat { clear: both; height: 0; font-size: 1px; } footer p { margin: 0; padding: 10px 0; background-color: #DDDDDD; text-align: center; font-size: .8em; }

12th Apr 2017, 5:03 AM

देवेंद्र महाजन (Devender)

+ 4

Please appreciate, if you found useful Thanks

12th Apr 2017, 5:04 AM

देवेंद्र महाजन (Devender)

+ 2

simply don't use position property. use display flex instead. I used to have similar problem just like you until I found out about flex. it's a great css3 property to move around your containers on the page.

12th Apr 2017, 11:37 AM

theBlueGHOST