CSS Woes

Hey, my site should look like this when viewed in a browser :

Unfortunately, it looks like this :
http://www.evolewtion.co.uk/site

Here is the CSS I use:

<style type = "text/css">
body{
	margin: 0px;
	font-family: Verdana;
	font-size: 10px;
	background-color: #FFFFFF;
}

.container {
	width: 500px;
	height: auto;
	background-color: #fff;
	margin:0 auto;
	margin-top: 20px;
}

.menu {
	width: 100%;
	height: 13px;
	color: #d4c8cc;
	border-color: #ff3288;
	border-width: 12px;
	border-style: solid;
}

.header {
	width: 1000px;
	height: auto;
	
}

.promotions {
	border-bottom: 10px solid #000;
	width: 1000px;
	height: auto;
}

.content1 {
	background-color: #fff;
	width: 200px;
	height: 50%;
	margin-top: 10px;
	margin-right: 20px;
	float: left;
	border-left-style: dashed;
	border-left-color: #ff3bd6;
}

.content2{
	
	width: 550px;
	height: 100%;
	float: right;
	position:static;
	margin-top: 10px;
	background-color: #fff;
	border-left-style: dashed;
	border-left-color: #5cf900;
	padding-left: 10px;
}

</style>

How do I get the contact section (or content2 as labelled in CSS Stylesheet) to display side by side with ‘hmm’ or ‘content1’. Any help is GREATLY appreciated.

Another problem is the site displays to the right, I have tried a few methods to center it, but none seem to work, even put it all in a table and had that centered, but it didnt work :frowning:

Again, thanks for any help !