Question

Essentially, I intend to create a progress bar from top of the screen to the bottom. Split into three parts, top is one colour, the middle is another colour and the bottom is finally another colour.

Unfortunately, this code only works in FF and Chrome but displays incorrectly in IE (all versions). It currently only displays the top colour in IE.

Code:

html, body 
{ 
  height: 100%; 
  margin: 10px;overflow: hidden;
} 

#head
{
  height: 80px;
  background-color:black;
}

#content
{
  min-height: 100%; 
  height: 100%; 
  margin: 0 auto; /*Allow for footer height*/
  vertical-align:bottom;
}

#prgsBar
{
  margin: 0 auto -80px; /*Allow for footer height*/
  background-color:gray;
} 

#footer, #push
{
   height: 100px; /*Push must be same height as Footer */
}

HTML:

 <div id='content' style='background-color:red'>    
  <div id='head'>        
   <h5>Hello</h5>   
  </div>    
   <div id='prgsBar' style='height: 29%;'/></div>   

Answer 1

Your #prgsBar is a self closing tag and shouldn’t be.

Change <div id='prgsBar' style='height: 29%;'/></div> to <div id='prgsBar' style='height: 29%;'></div>