.left and .right divs stuck behind header


#1

I am on the build a resume section. Exercise 4 fixing your header.

My problem is once I add the "position: fixed;" and "z-index: 1;" my .left and .right divs get stuck behind the header. Again the problem only occurs once I add the position and z-index. Below is my CSS code:

header {

background-color: #668cff;
height: 50px;
width: 100%;
border: 2px solid black;
position: fixed;
z-index: 1;

}

.right {
background-color: green;
height: 50px;
border-radius: 5px;
width: 100px;
float: right;
}

footer {

background-color: red;
height: 50px;
width: 100%;
border: 2px solid black;
clear: both;
position: absolute;
bottom: 0;

}

.left {
background-color: violet;
height: 50px;
border-radius: 5px;
width: 100px;
float: left;
}


#2

Because the header is fixed, it is not in normal flow. Consequently normal flow still begins at top left of the page. Give your content (left, right) a margin-top property of at least 50px so that they slip down the page, out from under the header, to appear beneath it in the page.