CSS Help - Main Content Area

Get Started
1

Hello,

This is my first time coding a vertical nav menu on a website, I am not sure how to align the main content div so that its at the top. Any other recommendations welcome.

Live View


/*Reset */
html, body, h1, h2, h3, h4, h5, h6, form, input, ul, ol, p, fieldset { padding: 0; margin: 0; }

/* Main CSS */
#wrapper{
	width:990px;
	height:auto;
	margin: 0 auto;
}
header{
	background:url('../images/header.png');
	width:990px;
	height:220px;
}

/*Menu */
nav{
	float:left;
	width:190px;
	margin:0 0 0 0;
}

nav ul{
	float:left;
	margin:0;
	list-style:none;
	font-size:14px;
	width:190px;
}

nav li a{
	font-size:14px;
	color:#fff;
	line-height:25px; /*Text Hight On Button */
	text-decoration:none;
	text-indent:25px;
	display:block;
	width:190px;
	height:27px;
	background-image:url('../images/normal.png');
}

nav a:hover{
	background-image:url('../images/onclick.png');
}

/*Content */

#content{
	float:left;
	margin: 0 0 0 190px;
	background:url('../images/mainbg.png') no-repeat;
	width:800px;
	height:500px;
	border:1px solid pink;
}

#content h1{
	margin: 0 0 0 15px;
	font-family: 'Josefin Slab', arial, serif;
	font-size:24px;
	border: 1px solid blue;
}

#content p{
	margin:0 0 0 15px;
}

footer{
	clear:both;
	background:url('../images/footer.png') no-repeat #000;
	width:990px;
	height:20px;
}

/* Misc*/

#metal{
	float:left;
	margin:160px 0 0 -190px;
	background:url('../images/metalnavbg.png');
	height:400px;
	width:190px;
}

/* Text Formatting */

#companyName{
	text-align:center;
	padding-top:45px;
	font-size:35px;
	color:#f0f0ef;
}

#companyQuote{
	text-align:center;
	font-size:18px;
	color:#a5a4a2;
}

/*Forms */

/*General*/

#validation{
	font-weight:bold;
	color:#ff0101;
}
fieldset{
	border:none;
}
label{
	display:block;
}

/*Admin Login */
#loginForm{
	margin: 0 auto 10px;
	width:150px;
	height:150px;
	background-color:#c5c4c3;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
}
#loginForm label{
	font-weight:bold;
	margin:5px 0 0 15px;
	display:block;
}
#loginForm input{
	margin:10px 0 0 15px;
	height:15px;
}
#loginForm input[type=submit]{
	margin-top:5px;
	display:block;
}

#sales{
	width:150px;
	height:180px;
	margin-left:15px;
	border: 1px solid red;
}

#sales .thumbnail{
	height:150px;
	width:150px;
}

#sales .location{
	float:left;
	text-align:center;
	font-weight:bold;
	margin-left:8px;
}

#sales .price{
	float:left;
	text-align:left;
	font-weight:bold;
	padding-left:5px;
	color:#ff0101;
}
2

Is this more like what you want? It’s a bit rough, but better at least.

Copy the code below and paste it into a .html file, then open it in your browser.

<!DOCTYPE html>
<head>
<title>Nationwide Housemovers : Home</title>

<style>
html, body, h1, h2, h3, h4, h5, h6, form, input, ul, ol, p, fieldset { padding: 0; margin: 0; }

header, nav, section, footer {display: block;}
#wrapper{
	width:990px;
	margin: 0 auto;
        overflow: hidden;
	background: url(http://www.dev.noo.co.nz/House/includes/images/metalnavbg.png);
}

header{
	background:url('http://www.dev.noo.co.nz/House/includes/images/header.png');
	width:990px;
	height:210px;
        text-align: center;
}

nav{
	float:left;
	width:190px;
	margin:0;
}

nav ul{
	list-style:none;
	font-size:14px;
	width:190px;
}

nav li a{
	font-size:14px;
	color:#fff;
	line-height:25px; /*Text Hight On Button */
	text-decoration:none;
	text-indent:25px;
	display:block;
	width:190px;
	height:27px;
	background-image:url('http://www.dev.noo.co.nz/House/includes/images/normal.png');
}

nav a:hover{
	background-image:url('http://www.dev.noo.co.nz/House/includes/images/onclick.png');
}

#content{
	float:right;
	background:url('http://www.dev.noo.co.nz/House/includes/images/mainbg.png') no-repeat;
	width:798px;
	height:500px;
	border:1px solid pink;
}

#content h1{
	margin: 0 0 0 15px;
	font-family: 'Josefin Slab', arial, serif;
	font-size:24px;
	border: 1px solid blue;
}

#content p{
	margin:0 0 0 15px;
}

footer{
	clear:both;
	background:url('http://www.dev.noo.co.nz/House/includes/images/footer.png') no-repeat #000;
	width:990px;
	height:20px;
}

</style>

<link href='http://fonts.googleapis.com/css?family=Josefin+Slab' rel='stylesheet' type='text/css'>
</head>
<body>
<div id ="wrapper">
    <header>
	<h1 id = "companyName">Nationwide Housemovers Ltd</h1>
	<h4 id = "companyQuote">"The guy who quotes the job, completes the job"</h4>
    </header>
    <nav>
	<ul>
	<li><a href="http://www.dev.noo.co.nz/House/home">Home</a></li>
	<li><a href="http://www.dev.noo.co.nz/House/about-us">About Us</a></li>
	<li><a href="http://www.dev.noo.co.nz/House/gallery">Gallery</a></li>
	<li><a href="http://www.dev.noo.co.nz/House/testimonials">Testimonials </a></li>
        <li><a href="http://www.dev.noo.co.nz/House/sales">Sales</a></li>
	<li><a href="http://www.dev.noo.co.nz/House/contact-us">Contact</a></li>
	</ul>
    </nav>
    
    <section id="content">
        <h1>Home</h1>
        <p>This is the home page</p>
	<p>home</p>
	<p>home</p> 
    </section>
    
    <footer>&copy; Houses LTD 2011</footer>
    </div> <!-- Wrapper Close -->

</body>
3

Thanks,

I had to remove the content float:left; line