Can't get Second Column to move to the Right

[Landslyde]

Just tying to make a two-column display. I have a page that does three, but can't get this page to do two. Here's my CSS:

#container {
	width: 100%;
	margin: 0 auto;
	#background-color: #000;
}

#left {
	float: left;
	width: 360px;
	margin: 0;
	padding: 2em;
	#padding-bottom: 8em;
}

#right {
	float: left;
	width: 360px;
	margin: 0;
	padding: 2em;
	#padding-bottom: 8em;
}

#middle {
	margin-left:auto;
	margin-right: auto;
	padding: 2em;
	#padding-bottom: 8em;
}

Here's the HTML:

<div id="container">
   menubar stuff here
   <div class="left">
      More stuff here
   </div>
   <div class="right">
      More stuff here
   </div>
</div>

I've also tried moving stuff around in the css file:

#container {
	width: 100%;
	margin: 0 auto;
	#background-color: #000;
}

#left {
	float: left;
	width: 360px;
	margin: 0;
	padding: 2em;
	#padding-bottom: 8em;
}

#middle {
	margin-left:auto;
	margin-right: auto;
	padding: 2em;
	#padding-bottom: 8em;
}

#right {
	float: left;
	width: 360px;
	margin: 0;
	padding: 2em;
	#padding-bottom: 8em;
}

The right class always moves below the left class. How can I get it to the right side of the left class?

[jeffreyappel]

here you go:

.container {
	width: 100%;
	margin: 0 auto;
	#background-color: #000;
	padding:5px;
}

.left {
	
	float: left;
	width: 45%;
	margin-top:10px;
	padding: 5px;
	#padding-bottom: 8em;
}

.right {
	
	float: left;
	width: 45%;
	margin: 0;
	padding:5px;
	#padding-bottom: 8em;
}