Main content div overlapping footer

Question

I've been attending a web design class and I started to work on my own to test some things. I set up a bunch of panels for the webpage and I found a problem when I made the footer.

Whenever my main body div starts to fill up and reaches the footer, it goes under the footer instead of adjusting the webpage and pushing it down. Any idea?

Picture of div going under:

Picture of div going under

body,
html {
  background-color: #bee9e4;
  height: 100%;
  width: 100%;
}
.center {
  text-align: center;
}
#banner {
  background-color: lightgrey;
  background: linear-gradient(to right, #99ffcc, white, #99ffcc);
  border-style: groove;
}
#aboutme {
  border-style: groove;
  border-width: 2px;
  border-color: lightblue;
  box-shadow: 0px 2px 2px grey;
}
#wrapper {
  min-height: 100%;
  position: relative;
}
#middlepanel {
  margin-top: 20px;
  background-color: lightgrey;
  margin-left: 21%;
  width: 58%;
  border-style: groove;
  overflow: auto;
}
#bannerpic {
  float: right;
  margin: 5px 20px 10px 5px;
  border-style: inset;
  border-width: 7px;
  border-color: lightblue;
  padding: 3px;
  box-shadow: 6px 6px 6px red;
}
#leftpanel {
  float: left;
  background-color: lightgrey;
  width: 20%;
  border-style: groove;
  overflow: auto;
}
#rightpanel {
  float: right;
  background-color: lightgrey;
  width: 20%;
  border-style: groove;
  overflow: auto;
}
#footer {
  background-color: lightgrey;
  border-style: groove;
  overflow: auto;
  width: 100%;
  height: 75px;
  position: absolute;
  bottom: 0;
  left: 0;
}
#content {
  padding-bottom: 75px;
  /* Height of the footer element */
}
.videoleft {
  float: left;
  width: 45%;
}
.videoright {
  float: right;
  width: 45%;
}
@media only screen and (max-width: 640px) {
  #leftpanel {
    display: none;
  }
  #rightpanel {
    display: none;
  }
  #footer {
    display: none;
  }
  #middlepanel {
    width: 100%;
    margin-left: 0%;
  }
}
.clearfloat {
  clear: both;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-left: 5px;
}


  I am a Junior at //
  I like to learn at school.
  I love to spend time on the computer




  
    
      Mr. M
    
    
      Home
    
    
      My Favs 
      
        Google
        Twitch
        Youtube
      
    
    
      CHS 
      
        Eli T
        Ashley X
        Andrew H
        Savannah C
        Robert G
      
    

    
      EHS 
      
        Ethan P
        Richard M
      
    

    
      MA 
      
        Bryan H
      
    

    
      MHS 
      
        Tyler P
        Neomi B
        Tanis S B
        Nicole C
        Vic S
      
    

    
      MVHS 
      
        Daniel C
        Brendon S
        Micah G
      
    

    
      RHS 
      
        Cole P
        Andrew W
        Alexis B
        Chase S
        David B
      
    
  



  
    Test left float
  

  
    This is a test right float
  

  
    Pictures taken for and of class!
    
      
        
          
          
            Code
          
        

        
          
          
            Class
          
        

        
          
          
            Class
          
        
        [
        ]
        

      
    

    Videos for the class!
    
      
    

    
      
    
  

  
    Stest

Michael Benjamin · Accepted Answer

Here's the source of your problem:

#footer {
    background-color: lightgrey;
    border-style: groove;
    overflow: auto;
    width: 100%;
    height: 75px;
    position: absolute;  /*  <--- REMOVES ELEMENT FROM NORMAL FLOW */
    bottom: 0;
    left: 0;
}

When you absolutely position an element, you remove it from the "normal flow" (also called "document flow"). This means that the element doesn't take up any space in the document and surrounding elements don't even know it exists.

Your main content div is overlapping the footer because the space is empty, as far as the content div is concerned. Before being absolutely positioned, the footer was more like a wall. After, it is more like a cloud, and surrounding elements go right through it.

There are two concepts you need to grasp in order to understand how this works:

Main content div overlapping footer

Answers (2)

Related Questions