Problems with layout of html document

Hi, i am expereincing some terrible problems with the layout of html. I spent hours, but i cannot find what is wrong. My html and css look right. In this picture http://i53.tinypic.com/2nu7lud.png you can see whats is not working. Dark blue div (id=mainContentArea) should be below menu. You can see only part of menu. Menu is light blue and white div with letter C. Also you can see that letters in dark blue div (ktitle..) are way too far from the top of div. I did not apply any css to them to be so far. My code is here:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
        <head>
            <meta http-equiv="content-type" content="text/html; charset=utf-8"/><title></title>
            <script language="javascript" src="http://localhost/IPN/js/ipnews.js"></script>
            <script language="javascript" src="jquery.js"></script>
            <link rel="stylesheet" type="text/css" href="http://localhost/IPN/css/pageBackground.css"/>
            <link rel="stylesheet" type="text/css" href="http://localhost/IPN/css/variuosStyles.css"/>
            <link rel="stylesheet" type="text/css" href="http://localhost/IPN/css/header.css"/>
            <link rel="stylesheet" type="text/css" href="http://localhost/IPN/css/contentAreaStyle.css"/>
            <link rel="stylesheet" type="text/css" href="http://localhost/IPN/css/links.css"/>
            <link rel="stylesheet" type="text/css" href="http://localhost/IPN/css/menu.css"/>
        </head>
        <body id="pageBackground">
            <div id="pageStyle" class="centerAlign">
            
                <div style="width: 190px; float: left">
                    <div class="formArea regularFont centerAlign" style="height: 145px; top: 20px">
                        <div style="font-weight: bold; position: relative; top: 5px; height: 25px;">Subscribe newsletter!</div>
                        <div style="height: 120px;">
                            <form method="post" action="subscribe.php">
                                <div style="position: relative; top: 10px; right: 2px;">Name: <input class="formField" type="text" name="username"/></div><br/>
                                <div style="position: relative; top: 0px;">Email: <input class="formField" type="text" name="email"/></div><br/>
                                <input type="submit" value="Subscribe" style="height: 30px; width: 90px; color: #11ABF3; font-weight: bold; background-color: #E7E7E7; border: black 1px solid; position: relative; bottom: 5px"/>
                            </form>
                        </div>
                    </div>            
                    
                    <div id="searchAreaDiv" class="formArea regularFont centerAlign" style="height: 165px; top: 40px;">
                        <div style="font-weight: bold; font-size: 14pt; position: relative; top: 5px; height: 30px;">Search</div>
                        <div style="font-weight: bold; position: relative; top: 5px; height: 20px;">Case-insensitive</div>
                        <div style="height: 90px;">
                            <form id="searchForm" method="post" action="search.php">
                                <input style="top: 10px; width: 160px" class="formField" type="text" name="searchPhrase"/><br/>
                                <input type="submit" value="Search" style="height: 30px; width: 70px; color: #11ABF3; font-weight: bold; background-color: #E7E7E7; border: black 1px solid; position: relative; top: 20px;"/>
                            </form><br>
                        </div>
                        <a id="advancedSearchLink" style="position: relative; top: 0px; height: 20px;" class="link1" href="#" onClick="displayAdvancedSearch()">Advanced search</a>
                    </div>
                </div>
        
                <div style="width: 834px; float: right">
                    <div id="generalHeader">
                        <div id="logoArea"></div>
                        <div id="loginRegisterDiv" class="roundedCorners">
                            <div style="position: relative; top: 5px; width: inherit; height: 20px; text-align: center;"><a class="link1" href="register.php">Register and personalize your news content</a></div>
                            <div style="height: 50px;">
                                <form method="post" action="login.php">
                                    <input class="formField loginFormField" type="text" name="username"/>
                                    <input style="left: 25px;" class="formField loginFormField" type="password" name="password"/>
                                    <input class="formField loginFormField" style="height: 30px; width: 60px; left: 35px; top: 17px; color: #11ABF3; font-weight: bold; background-color: #E7E7E7; border: black 1px solid;" type="submit" value="Log in"/>
                                </form><br/>
                            </div>
                            <div style="width: inherit; height: 30px; text-align: center;"><a class="link1" href="forgotPassword.php">Forgot password?</a></div>
                        </div>
                    </div>
                    <div id="menu">
                        <div style="background-color: #11ABF3;" class="menuDiv">
                            <div class="menuButton"><a onMouseOver="javascript:displaySubMenu('1')" class="link1" href="conflicts.php?category=all">Conflicts</a></div>
                            <div class="menuButton"><a onMouseOver="javascript:displaySubMenu('2')" class="link1" href="diplomacy.php?category=all">Diplomacy</a></div>
                            <div class="menuButton"><a onMouseOver="javascript:displaySubMenu('3')" class="link1" href="localAffairs.php?category=all">Local affairs</a></div>
                            <div class="menuButton"><a onMouseOver="javascript:displaySubMenu('4')" class="link1" href="crimes.php?category=all">Crimes</a></div>
                            <div class="menuButton"><a onMouseOver="javascript:displaySubMenu('5')" class="link1" href="opinion.php?category=all">Opinion</a></div>
                            <div class="menuButton"><a onMouseOver="javascript:displaySubMenu('6')" class="link1" href="videos.php?category=all">Videos</a></div>
                            <div class="menuButton"><a onMouseOver="javascript:displaySubMenu('7')" class="link1" href="photos.php?category=all">Photos</a></div>
                        </div>
                        <div id="subMenu" class="menuDiv" style="background-color: white">
                        </div>
                    </div>
                    <div class="regularFont centerAlign" id="mainContentArea" style="height: 700px">

                    ktitle278title27</div>
                </div>
            </div>
        </body>
</html>

mainContentArea style:

div#mainContentArea{
    width: 800px;
    position: relative;
    top: 00px;
    height: 560px;
    padding-top: 0px;
    margin-top: 0px;
    background-color: blue;
}

I hope that someone of you understand what is wrong. If you need tell me to post any of my css files

here are the most of styles. If that does not help you to find the problem, i would send you my project of create accountg in dropbox


div.formArea{
    background-color: #1895CF;
    width: 180px;
    padding-left: 5px;
    color: white !important;
    text-align: center; 
    position: relative;
}


div#generalHeader{
    height: 150px;
    width: 834px;
    float: right;
    position: relative;
    background-color: #E7E7E7;
}

div#logoArea{
    height: 120px;
    width: 320px;
    background-image: url("http://localhost/IPN/pageImages/logo.jpg");
    position: relative;
    left: 40px;
    top: 15px;
}

div#loginRegisterDiv{
    background-color: #11ABF3;
    width: 380px;
    height: 100px;
    float: right;
    position: relative;
    right: 10px;
    bottom: 95px;
    padding-top: 0px;
    padding-bottom: 0px;
}

div#menu{
    height: 60px;
    width: 820px;
    float: right;
    position: relative;
    right: 14px;
}

div.menuDiv{
    height: 30px;
    width: inherit;
}

div.menuButton{
    height: 30px;
    float: left;
    padding-left: 5px;
    padding-right: 5px;
    line-height: 30px;
}

body#pageBackground{
    background-color: white;
}

div#pageStyle{
    background-color: #E7E7E7;
    width: 1024px;
    height: 1000px;
}