Clear property not working?


#1

Okay so here is the code, and I'll add a picture as well, but as you can see my "footer" isn't sitting below my .left and .right. And I can't figure out why, so I'd appreciate if I could get some help.

/*div {
border-radius: 5px;
}

/*#header {
z-index: 1;
display: block;
position: fixed;
background-color: orangered;
border: 5px solid black;
height: 60px;
width: 97.5%;
margin-top: -20px;
margin-bottom: 10px;
}

.left {
position: relative;
float: left;
border: 5px solid black;
width: 10%;
height: 400px;
margin-top: 50px;
margin-bottom: 10px;
background-color: #9E0A0A;
}

.right {
position: relative;
float: right;
border: 5px solid black;
height: 400px;
width: 88%;
margin-top: 50px;
margin-bottom: 10px;
background-color: #FFAB00;
}

/*#footer {
border: 5px solid black;
position: relative;
clear: both;
width: 97.5%;
height: 50px;
margin-top: 10px;
background-color: orangered;
}*/

Picture below:


#2

Found the issue in the html portion..... The ".right" closing < / div > was like so: < / di >