DIV Layout Help...almost there, Few Questions Options

[Neighborhood B]

Here is a visual layout of what I'm trying to do...

http://img238.imageshack.us/img238/7312/proposed9lb.png

1) - Align...I'm trying to align the two content boxes with the top menu bar. Each content box is on a different DIV and both are set float:left. Why aren't they lining up?

2) Center...I want to center that picture within the DIV...I have the center code in the HTML but it's not doing anything. The pic is 179x179 and the sidebar div has a width of 210.

3) Move Up...Why does the side bar aligned with the SECONDARY CONTENT BODY box but not the MAIN CONTENT BODY box...I want to have that aligned with the first so that everything is aligned together.

4) Remove...Why does it appear that both the picture and the comment box BOTH have an additional box around the both of them? This happened when I placed the Div for the picture in the same div as the sidebar, because before that...the comment box would align next to the picture and not below it.

Here is my CSS:

<style type="text/css">
.main{
position:absolute;
left:50%;
top:150px;
width:800px;
z-index:1;
margin-left:-400px;
}

.navigation{
border-bottom:1px solid;
border:1px solid;
}

.navigation li{
display:inline;
list-style-type:none;
padding:0 20px 0 0;
}

.navigation a:link, .navigation a:visited{
font-family:arial;
color:6495ED;
font-size:11px;
padding:3px;
}

.navigation a:hover{
text-decoration:none;
padding:3px;
color:FFFFFF
}

.content{
width:525px;
float:left;
padding:5px 5px 5px 7px;
margin:5px 0 0 5px;
border:1px solid;
}


.sidebar{
width:210px;
float:right;
padding:5px 5px 5px 7px;
margin:5px 5px 0 0;
border:1px solid;
}

.picture{
width:210px;
float:right;
padding:5px 5px 5px 7px;
margin:5px 5px 0 0;
border:1px solid;
}

.theater{
width:320px;
float:right;
padding:5px 5px 5px 7px;
margin:5px 5px 0 0;
border:1px solid;
}

body {
background-color:3A5FCD;
background-attachment:scroll;
}

table td div {background-color:3A5FCD;}


input{
color:6495ED;
background-color:104E8B;
border:1px solid;
border-color::d6d3d3;
margin-left:6px;
margin-top:4px;
}

input:hover{
color:555555;
background-color:6495ED;
border:1px solid;
border-color::555555;
}

input:focus{
color:555555;
border:1px solid;
bord-color:555555;
}
</style>

This is my other coding:

<div class="main">
<table style="width:800px;
height:800px;
cellpadding:0px;
cellspacing:0px;
background-color:3A5FCD;">
<tr><td valign="top">

<div class="navigation">
<ul>
<li><a href="http://www.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=10341940">Add Me</a></li>
<li><a href="http://mail6.myspace.com/index.cfm?fuseaction=mail.message&friendID=10341940">Message Me</a></li>
<li><a href="http://facebook.com/p.php?id=15615582&l=8beec9a42a">Facebook Me</a></li>
<li><a href="http://www.braxtanfilm.com/homo.html">Block Me</a></li>
<li><a href="http://groups.myspace.com/index.cfm?fuseaction=groups.addtogroup&friendID=10341940">Invite Me</a></li>
</ul>

</div>

<br />

<div class="content">

MAIN CONTENT BODY

</div>

<div class="content">

SECONDARY CONTENT BODY

</div>

<div class="sidebar">
<div class="picture">
<A HREF="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewPicture&friendID=10341940"><center><img src=http://x11.putfile.com/1/819283569.jpg align=center"></center></A><BR></div>



<div class="sidebar">
<div class="commentbox">
<center>Add Comment / <a href="http://www.myspace.com/index.cfm?fuseaction=user.homeComments&friendID=10341940">View All</a><br />
<form method="post" action="http://www.myspace.com/index.cfm?fuseaction=user.ConfirmComment">
<input type="hidden" name="friendID" value=10341940">
<textarea name="f_comments" cols="25" rows="5"></textarea><br />
<input type="submit" value="Post">
</form></center></div>
<br />
YOUR SIDEBAR CONTENT

</div><BR>



</td></tr></table></div>
<div style="position:relative; height:400px; overflow:hidden; border:0px;"><table><tr><td><table><tr><td>


Can anyone tell me how to fix any of these problems?

[Neighborhood B]

thanks