I am building a resume and the only thing showing is the header and navbar


#1

i am building a resume and the only things being shown are the header and navbar. I do not see my footer and the two boxed on left and right. Can you please tell me what I am doing wrong?

My work:

<!DOCTYPE html>
<html>
<head>
	<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>

<body>
	<div id="header">
	<div id="navbar">

		<ul>
			<li>Codcademy</li>
			<li>Google</li>
			<li>Yahoo</li>
		</ul>
	</div>
	</div>	

	<div class="left"></div>		
	<div class="right"></div>
	
	<div id="footer"></div>

</body>
</html>

div{border-radius:5px}

#header{height:60 px;
	width:98.5%;
	background-color:#acd1b2;
	position:fixed;
	margin:0 auto;
	left:0;
	right:0;}

ul{list-style-display:none;
	text-align:center;}

ul li{display:inline;
	padding:5px 5px 5px 5px;
	border:2px solid #000000;
	color:#ffffff;
	border-radius:5px;
	background-color:#cc0323;}

#navbar{margin-top:-14px;
	margin:auto;}

.right{height:90%;
	width:93.5%;
	background-color:#F4EBC3;
	float:right;
	margin-top:65px;}

.left{height:90%;
	width:60px;
	background-color:#ffffff;
	float:left;
	clear;both}

#footer{height:60px;
	with:98.5%;
	background-color:#3c4543;
	clear:both;}

#2

Sorry, I meant to type boxes not "boxed"


#3

This is personally something i never do, but if you use percentage height, it will inherit from parent, what do i mean by that? The element will be 93.5% the height of its parent (body is the parent of .left and .right, so you could add:

html, body {
  height: 100%;
}

you might also want to add margin: 0; to this css selector to removes body's annoying margin. Further more, be aware of typos, you misspelled width in your footer, you can't have float and clear on the same property (.left), and after a property (clear) there should be a colon, not a semi-colon, and it is list-style-type: none; not list-style-display, here are all the changes


#4

Thank you so much. Your instruction was very clear. Now it works.