CSS div/navigation alignment problem!! Just doesn't make sense...

[2939195631902]

I've added a few borders and uploaded the picture of the problem.
I've been attempting to fix is all day. Can someone shine me some light. I would appreciate it.

* Screenshot url: venogames.com/webpage.jpg

* Problems:
1. when i add the subheader_login div with the red border shown in the picture above, the navigation with the yellow border is pushed left from right. Why does it do this? They are not even in the same parent div.

2. for all three navigation: navi_primary_names (shown in white borders), navi_primary_names, footer_navi_names. No matter how i change the "margin-top: x;" value or "margin: x 5px; value, the navigation names stays the same. It doesn't change in height at all.

3. after adding either the black border on navi_primary, the parent div of navi_primary_names, the "register games" text is pushed from left to middle.




header.php (this is require() into the index page. This contains everything above "register games"):



<div id="header">

<div id="subheader">
<a href="index.php"><div id="hdflashgames_title">
</div></a>
<div id="subheader_login">

<?php
check_logged_in();
?>

</div>
</div>


<div id="header_navi">
<div id="navi_primary">
<?php
$navigation_set = get_all_navigation('navi_primary');
while ($row = mysql_fetch_array($navigation_set)) {
echo "<a href=" . $row['address_name'] . ".php" . ">";
echo "<div class=\"navi_primary_names\">" . $row['menu_name'] . "</div>";
echo "</a>";
}
?>
</div>

<div id="navi_secondary">
<?php
$navigation_set = get_all_navigation('navi_secondary');
while ($row = mysql_fetch_array($navigation_set)) {
echo "<a href=" . $row['address_name'] . ".php" . ">";
echo "<div class=\"navi_secondary_names\">" . $row['menu_name'] . "</div>";
echo "</a>";
}
?>
</div>
</div>

</div>







CSS:

body {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
background: url(../direct_images/body_background.jpg) repeat-x;
overflow: hidden;
}

#content_body {
margin: 0px auto;
width: 970px;
padding: 0px 10px;
height: 800px; /*place holder*/
background: white;
}


/* header ---------- ---------- ---------- --------- */
#header {
background: url(../direct_images/header_navigation.jpg) no-repeat;
width: auto;
height: 100px;
}

#subheader {
width: 970px;
height: 70px;
}

#hdflashgames_title {
margin-top: 8px;
margin-left: 22px;
width: 222px;
height: 50px;
float: left;
}

#subheader_login {
margin: 10px 12px;
padding: 1px 6px;
background: url(../direct_images/login_header_box.gif) no-repeat;
width: 188px;
height: 48px;
float: right;
border: 1px solid red;
}

#header_navi {
width: 970px;
height: 30px;
}

#navi_primary {
height: 30px;
float: left;
border: 1px solid black; /*adding this border pushes "register games" to middle from left. */
}

#navi_secondary {
height: 30px;
float: right;
border: 1px solid yellow;
}

.navi_primary_names {
margin-top: 50px;/*the divs stay the same no matter what i put. 50px for example*/
display: inline;
color: white;
border: 1px solid white;
}

.navi_secondary_names {
margin: 50px 5px;/*the divs stay the same no matter what i put. 50px for example*/
display: inline;
color: white;
}



/* main content ----------- ---------------------------*/
#main_content {
height: 600px;
float: left;
}


/* footer ----------------------- --------- --------- */
#footer {
background: url(../direct_images/footer.gif);
height: 40px;
width: 970px;
float: left;
}

.footer_navi_names {
margin: 10px 10px auto 18px;
color: black;
display: inline;
}