Can't get the .left in place


div {
    border-radius: 1px;

#header {
    position: fixed;
    z-index: 1;
	height: 50px;
	width: 97.8%;
	background-color: black;
	margin-top: -20px;
	margin-bottom: 10px

.left {
    float: left;
    background-color: #333333;
    height: 200px;
    width: 10%;

.right {
    margin-top: 40px;
    float: right;
    background-color: black;
    height: 80%;
    width: 80%;
    margin-bottom: 10px;

#footer {
    clear: both;
    background-color: black;
    height: 50px;
    width: 100%
    margin-bottom: -20px;
    margin-top: 10px;


What exactly is it you are trying to achieve? Where do you want to place it?

Codecademy is forgiving, but giving .right a height of 80% will cause it not to show unless you give both parents a height:

html, body { height: 100%; }


you can add a margin-top: 40px to .left, just like you did for .right




ah, that explains a lot. I assumed the html code was correct. It is correct, but let me say this: The order of the html elements is important, i would put the div with class left before your footer (talking about html here)


omg. I spent so long staring at the css and didn't even think of that. thanks


You're welcome, did you also consider the tip i gave the html + body having a height? Codecademy will show you your .right, but i put your code in a bin, and then it won't show, you have to specify a height for body an html, i already made it in a comment for you.


Oh okay gotcha. I did that in the bin though and everything works except the footer?,output


That could be my fault, your id has a class, it should have an id:

<div id="footer"></div>

And there was a semi-colon missing somewhere, after height or width, don't remember