My footer is not at the bottom


#1



Build a resume. 2. Laying out your divs.


My footer div is between the header and the right and left divs. There is about 20px sticking out from the underneath of my header. It is also slightly underneath the left and right divs. I can not make the footer move to the bottom of the page where it should be.

#header {
    border-radius: 5px;
	z-index: 1;
	position: fixed;
	width: 97.5%;
	margin-top: -15px; 
	height: 50px;
	background-color: #bc8f8f;
  }
  
  #left {
    border-radius: 5px;
	z-index: 1;
	position: fixed;
	width: 60px;
	margin-top: 45px;
	height: 85%;
	background-color: #db7093;
      }
  
  #right {
    border-radius: 5px;
	z-index: 1;
	position: fixed;
	width: 88%;
	height: 85%;
	background-color: #ffe4e1;
	margin-left: 70px;
	margin-top: 45px;
      }

#footer {
	position: relative;
	height: 50px;
	background-color: #ffb6c1;
	margin-right: 2px;
}


#2

using height in percentage? Risky. But okay, why should your #footer be at the bottom? You can always use position: fixed or absolute and then do bottom: 0 to make the #footer at the bottom

other things i don't get: using id for left and right might get your in trouble in the exercises. i don't understand why your left and right have a fixed position


#3

Thank you for your advice. I ended up restarting and then copying and pasting the code from the previous lesson and editing it to make it my own. Thanks again :blush: :blush: :blush:


#4

That makes more sense, then you have a floating right and left, which then you clear with your footer, making your footer at the bottom