Can't get the .left in place


#1



https://www.codecademy.com/courses/web-beginner-en-9x6JW-WnAFv/0/7?curriculum_id=50579fb998b470000202dc8b


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;
}


#2

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%; }

#3

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


#4
Imgur

that


#5

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)


#6

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


#7

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.


#8

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

http://jsbin.com/yenejimoma/1/edit?html,output


#9

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