CSS Issues

**Lucius_Natalis** · September 28th, 2010, 04:36 PM

Hello,

I am working on a school project which requires me to make a four page site for a band using the same external CSS style sheet; all of which I have to write from scratch. For some reason my CSS doesn't seem to want to work properly. I have it posted below in hopes that someone can point out to me an error in the code that I am overlooking as well as the html code linking to it.

HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The Go Team</title>

<link rel="stylesheet" type="text/css" href="css/styles.css"/>

</head>

<body>

<div id="mainContain">

<div id="header"><img src="images/header.jpg" /></div>
<div id="navBar">Navagation Bar</div>
<div id="centerContent">Stuff</div>
<div id="footer">Footer</div>

</div>



</body>
</html>

CSS:

Code:

@charset "UTF-8";
/* CSS Document */

body,p,h1,h2,h3,h4	{
	padding:0px;
	margin:0px;
	text-decoration:none;
}

.clear	{
	clear:both;
}

#mainContain {
	width:800px;
	height:600px;
	margin-right:auto;
	margin-left:auto;
	border: 2px solid #333;
}

#header {
	width:800;
	height:140;
}

#navBar {
	width:800px;
	height:20px;
	background-color:#9F806B;
}

#centerContent {
	width:800;
	height:340;
}

#footer {
	width:800;
	height:100;
	clear:both;
	background-image:url(../images/footer.jpg);
}

To clarify a little. The problem that I am having here is that the div tags nested inside the mainContain div tag are not displaying at their proper heights and weren't even visible until I put text inside them.