Floating error


#1

div {
border-radius: 2px;
}

header {

height: 18%;
width: 100%;
background-color: #2D2B26;
position: fixed;
z-index: 1;

}
.left {
height: 100%;
width: 40%;
background-color: #141416
float: left;
}
.right {
height: 100%;
width: 60%;
background-color: #1F1E1B;
float: right;
}

footer {

height: 18%;
width: 100%;
background-color: #3B3830;
clear: both

}

When I float .right, it works. Floating .left makes it disappear.
Any suggestions?


#2

and that is why i always put a semi-colon even after the last value. look at your #footer:

#footer {
height: 18%;
width: 100%;
background-color: #3B3830;
clear: both
}

your clear: both doesn't have a semi-colon, which is fine since it is the last property + value. and i guess you had the same in .left:

.left {
    height: 100%;
    width: 40%;
    background-color: #141416
}

no semi-colon after background-color: #141416 which is fine, because it is last property but then you add float, and the missing semi-colon becomes a problem. I recommend to always add a semi-colon at the end, to prevent this kind of problem.


#3

then i would like to make a few suggestions, when using percentage for height, you need to be really sure that all parent elements have a height (the elements didn't show in my case, due to this problem), now, you nested your divs directly in body, but body and html are still parent of the divs, so i recommend you add:

html, body {
  height: 100%;
}

i guess have to explain at this point, that if you height: 50%; the element will be 50% the height of its parent element.
while on this subject, body has a margin by default, i recommend to remove it:

html, body {
  height: 100%;
  margin: 0;
}

height in percentage, i don't like it, but i guess you do. Now you have a problem, the problem is that your .left and .right are partial behind #header, you don't want this, now if you simple had #header with a height in px, you could have done:

.left, .right {
  margin-top: 60px;
}

however, your #header is 18% in height, now you can't simple do margin-top: 18%, but i will leave that too you