CSS aligning problem.

I feel like a noob asking this (I guess I am), but I have a problem aligning these two div's on my site. The site is here (http://operationorbit.com/new_site). Basically, I need the two boxes that say "THIS IS TEXT" and "More text." on the right of the main div, and the navigation on the left. I already tried using floats, but that made them float out of the main part and the footer would come up, and it would all look ugly. So anyway, here is the css:


* {
margin:0;
padding:0;
}

html, body {
height:100%;
background-image:url(bg.jpg);
background-repeat:repeat-x;
font-family:Verdana, "Copperplate Gothic Light", Rockwell, Georgia, sans-serif;
}

a {
border:0;
color:#;
text-decoration:none;
font-size:12px;
font-family:Verdana, "Copperplate Gothic Light", Rockwell, Georgia, sans-serif;
}

a:hover {
color:#;
cursor:default;
}

#container {
background-color:#FFFFFF;
border-bottom:0px;
border-top:0px;
border-right:1px solid #000;
border-left:1px solid #000;
width:650px;
margin: 0 auto 0 auto;
}

#header {
text-align:center;
color: #FFFFFF;
font-weight:bolder;
font-size:36px;
line-height:100px;
border:0px;
width:650px;
height:100px;
margin: auto auto auto auto;
background-image:url(header.jpg);
background-repeat:repeat-x;
border-bottom:1px solid #000;
}

#nav {
padding:10px;
border:1px solid #000;
width:150px;
}

#content_container {
width:630px;
border:1px solid #000;
padding:10px;
}

#content {
border:1px solid #000;
width:450px;
}

#footer {
text-align:center;
border:1px solid #000;
width:640px;
height:25px;
margin: auto auto auto auto;
line-height:25px;
}


Thank you!

Use this for your CSS
* {
margin:0;
padding:0;
}

html, body {
height:100%;
background-image:url(bg.jpg);
background-repeat:repeat-x;
font-family:Verdana, "Copperplate Gothic Light", Rockwell, Georgia, sans-serif;
}

a {
border:0;
color:#;
text-decoration:none;
font-size:12px;
font-family:Verdana, "Copperplate Gothic Light", Rockwell, Georgia, sans-serif;
}

a:hover {
color:#;
cursor:default;
}

#container {
background-color:#FFFFFF;
border-bottom:0px;
border-top:0px;
border-right:1px solid #000;
border-left:1px solid #000;
width:650px;
margin: 0 auto 0 auto;
}

#header {
text-align:center;
color: #FFFFFF;
font-weight:bolder;
font-size:36px;
line-height:100px;
border:0px;
height:100px;
margin: auto auto auto auto;
background-image:url(header.jpg);
background-repeat:repeat-x;
border-bottom:1px solid #000;
}

#nav {
padding:10px;
border:1px solid #000;
width:150px;
float:left;
}

#content_container {
width:628px;
border:1px solid #000;
padding:10px;
}

#content {
border:1px solid #000;
margin-left:175px;
}

* html #content {
margin-left:172px;
}

#footer {
text-align:center;
border:1px solid #000;
height:25px;
margin: auto;
line-height:25px;
clear:both;
}
Compare it to your old CSS, ask any questions you may have. Also you can only use an ID one time, you have used it twice. If you must use the same styles use a class instead.