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;
}

You are nesting block level elements inside inline elements, which is not allowed. I.e.

<a href=""><div class="navi_primary_names"></div></a>

Should have been.

<a href=""><span class="navi_primary_names"></span></a>

If you want to give it semantic meaning, you should use the relevant tags for that.

You should also include your anchor in either paragraphs or lists. If its a menu you are making, using list would be a good idea. Both for accessibility reasons, as well as styling purposes, lists also generally allow for richer styling of your navigation links.

1: #navi_secondary The navigation with the yellow border, gets pushed to the right because your #subheader is set to 70px! The Height of your #subheader_login division is set to 48px, adding the height of #navi_secondary gives 78. Adding 8 px to the height of your #subheader resolves the problem. But you may want to remove some of those height declarations, and maybe dump the pixel based layout intirely.


2: I assume what you want is the text to vertically-align to middle, because margin is not used for height. Use the relevant font properties for that. Applying a line-height of either 100% or 30px, and a vertical-align: middle; to your anchor, would align the text vertically. I.e.

#navi_primary a {
line-height: 30px;
vertical-align: middle;
}

You also got some obsolete properties in there, such as the overflow on your body, or the width; which is default, note. The width is not inherited.

Next time also try to provide us with a link, or leave out any php coding. As your php isn't relevant to the markup and style, and only complicates things. You can't expect us to Visualise how your code will look, most coders will need a working example. ;-)

You should also remember to include valid doctype, if you haven't done so already.