why are my DIVs overlapping

Question

Can someone please tell me why my 'header' div and 'pageInnerWrap' div are overlapping...been messing about with position absolute but cant get it...any help appreciated...ta

      <div id="pageWrap">
                    <div id="pageInnerWrap" class="push">

                        <div id="header" class="push">

                            <div class="inner-wrap">
                                <a id="A2" href="Home.aspx"><img src="/images/logo_new.png" alt="Azi Map" /></a>    

                                    <div style="position:relative;float:right">

                                        <%--Login Stuff--%>
                                        <div class="loginDisplay" style="width:33%">                               

                                            <asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
                                                <AnonymousTemplate> 
                                                    <img src="/images/btn_login.png" alt="Login" />                        
                                                    <a href="~/Account/Login.aspx" ID="A3" runat="server" title="Sign in with your account details">Login</a> |
                                                    <a id="A4" href="~/Account/Register.aspx" runat="server" title="Sign up for your 30 days free trial">Free Trial</a>
                                                </AnonymousTemplate>
                                                <LoggedInTemplate>
                                                    Welcome <span class="bold"><asp:Label id="UserLogonID" runat="server"></asp:Label></span>,
                                                    <br />                        
                                                     [<asp:HyperLink ID="hlChangePassword" runat="server" NavigateUrl="~/Account/ChangePassword.aspx">Change Password</asp:HyperLink>]
                                                     [<asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/Home.aspx"/>]
                                                    <br />
                                                </LoggedInTemplate>
                                            </asp:LoginView>

                                            <p style="text-align:right">
                                                <asp:Label ID="lblFreeTrialDays" runat="server" Text=""></asp:Label>
                                            </p>

                                        </div>

                                    </div>
                                        <ul id="nav">
                                                <li><a href="<%=Session["BaseURL"] %>MemberPages/customerDataStorePortal.aspx" id="btn-data"><img src="/images/btn_layers.png" alt="Layers" />Layers</a></li>
                                                <li><a href="<%=Session["BaseURL"] %>MemberPages/customerMapPortal.aspx" id="btn-maps"><img src="/images/btn_maps.png" alt="Layers"/>Maps</a></li>
                                                <li><a href="<%=Session["BaseURL"] %>AdminPages/Admin.aspx" id="btn-admin"><img src="/images/btn_admin.png" alt="Layers"/>Admin</a></li>
                                        </ul>

                                        <div id="mobile-btn">
                                            <img src="imgs/menu_btn.png" alt="Menu Button" />
                                        </div>


                                  </div> 
                            </div><%--header--%>



                                <div style=" margin: 0 auto; width: 2000px; height: 1200px">
                                    <div id="mainContent" class="main" style="background:white;">
                                        <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
                                            <div style= "visibility:hidden;>
                                                <div id="AlertDiv" class="AlertStyle">
                                                    <asp:Image ID="Image1" runat="server" ImageUrl="~/images/loading.GIF"/> 
                                                </div>
                                            </div>
                                    </div>
                                </div>
                     </div>

                <div id="mobile-nav-items">
                    <ul>
                    </ul>
                </div>

            </div>

CSS

  * {
    box-sizing: border-box;
}

html, body, div {
    border: 0 none;
    margin: 0;
    padding: 0;
}

body { padding-top:150px; }

#pageWrap { position: relative; }
#pageInnerWrap { position: relative; }

div#header { background:#1E4964; color:#fff;  font:14px/1.5em Arial, sans-serif; font-weight:600; position:fixed; width:100%; top:0;  }
div#header .inner-wrap { max-width:1900px; margin:0 auto; width:95%; padding:0 2.5%; } 
div#header a { color:#fff; position:relative; text-decoration: none; }
div#header a:active { top:1px; }

header #page-header-top { background:#000; }
header #page-header-top .inner-wrap { padding-top:10px; padding-bottom:10px; height:40px; text-align:right; overflow: hidden; }
header #page-header-top .inner-wrap a { background:#153447; }
header #page-header-top img { position: relative; top:4px; left:-4px; }
header #page-header-top a:hover { text-decoration: underline; }
header #mobile-btn { display:none; }

header a#logo { float:left; margin:38px 0; }

div#heade ul#nav { float:right; margin:0; }
div#heade ul#nav li { display:inline-block; text-align:center; }
div#heade ul#nav li a { padding:20px 30px; display:inline-block; }
div#heade ul#nav li a:hover { background:#185070; }
div#heade ul#nav li a#active { background:#153447; }
div#heade ul#nav li a img { margin:0 auto 20px; display:block; } 

header .clear { clear:both; }

#mobile-nav-items { display:none; }
#mobile-btn { display:none; float:right; margin:35px 0; padding:10px 10px 5px; cursor: pointer; position: relative; }
#mobile-btn:active { top: 1px; }

@media only screen and (max-width : 1200px) {
    header ul#nav li a { padding-left:20px; padding-right:20px; }
}


@media only screen and (max-width : 950px) {
    header #mobile-btn { display:block; }
    header #mobile-btn:hover {  background:#153447; }
    header #mobile-btn.menu-open { background:#153447; }
    header #mobile-btn img { width:20px; }
    #mobile-nav-items {
        display:block;
    }

    ul#nav { display: none; }

}


/* change on scroll */
div#header, 
div#header * {
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}

header.scrolled #page-header-top .inner-wrap { height:0; padding-top:0; padding-bottom:0; }
header.scrolled a#logo { margin:12px 0 5px;  }
header.scrolled ul#nav li a img { height:0; margin:0; }
header.scrolled #mobile-btn { margin:10px 0 3

px; }

Answer 1

Not surprised you have a problem with this code, get your indentation right, I think you're missing a closing </div> and there's a missing quotation mark:

<div style= "visibility:hidden;>

I tried to clean it up, but gave up, only you know which part should be where. For example put siblings on the same tabulation level:

<div id="header" class="push">
    <div class="inner-wrap">
        <a id="A2" href="Home.aspx"><img src="/images/logo_new.png" alt="Azi Map" /></a>    

        <div style="position:relative;float:right">
            ...
        </div>
        ...
        <div />
    </div>
</div>

Also on SO, you need 4 spaces or a tab before your code block, but not more, just look at your question, half of the code is unnecessary leading whitespace.