Setting height to 100% doesn't work...

Thanks Jason! I was following along with Guil perfectly until I got here and it all fell apart and my footer wasn't down the bottom anymore :( So why did it work for Guil and not us I wonder?

Good question Rebecca, looking back I think I understand whats up. If we basically think of all web coding with HTML, CSS and Javascript is like an onion, of course being many layers and further out we go represents the Hierarchy. Here it was the case of adding the property to the very page structure itself hence the very html and body. I still don't exactly know how it worked for Guil the way it did, an educated guess would be he was using a reset styling. But the core idea of what I just explained with the onion example stands, and I find a great way to keep an overview of all this and not let it get over your head. Sketching up a visual of boxes within boxes handy, kind've like a plan, a map or blueprint to help visualize what your coding. Sorry for the long winded answer

Hi Christina,

Thanks for your answer. Here is the code that I was talking about. It's a little long…the part where the height of the .col, the .content-row and the .main-wrapper is set to 100% is at the bottom of the media query.

I'm going to look at Guil's code…I hadn't thought of that. Great idea.

/********************
BLOCKS OF CONTENT
********************/


.primary-content{
  background:rgba(60, 100, 160, 1);
  color:white;

}

.secondary-content{
  background:rgba(100, 100, 50, 1);
  color:white;

}

.extra-content{
  background:rgba(100, 50, 100, 1);
  color:white;

}

.main-footer{
  background:rgba(100, 100, 100, 1);
  color:white;
  padding:25px;
  box-sizing:border-box;


}

.main-header{
  background:rgba(100, 200, 255, 1);
  color:white;
  padding:25px;
  box-sizing:border-box;
}

/********************
NAVIGATION
********************/

.main-nav{
  padding:0;

}


.main-nav li{
  list-style-type:none;
  background:rgba(150, 150, 150, 1);
  padding:10px;
  margin:5px 0;
  text-align:center;



}

/********************
LOGO
********************/

.main-logo{
  background:rgba(100, 100, 100, 1);
  color:white;
  width:200px;
  text-align:center;
  margin:0 auto;
  padding:10px;

}

/********************
BODY AND HTML SO THAT
THINGS DON'T COLLAPSE
********************/

body{
  height:100%;

}

html{
  height:100%;

}

/********************
APPLY TO ALL COLUMNS
********************/

.col{
  padding:25px;
  box-sizing:border-box;

}

/********************
MEDIA QUERY FOR 
LARGER SCREENS
********************/

@media screen and (min-width:768px){

.content-row{
    position:relative;


}

.col{
    position:absolute;
    width:30%;

}

.primary-content{
    width:40%;
    left:0;

}

.secondary-content{
    left:40%;

}
.extra-content{
    right:0;

}

.content-row, .main-wrapper, .col{
    height:100%;

  }








}

The problem lies in the downloaded code. It doesn't match the video.

Oh no.. now I'm having the same problem. What did you do??

For me, setting the html and body height to 100% (outside of the media queries) fixed the issue.

They really need to be added back into the download files. Spent wasted time trying to fix something I didnt break :(