why are my DIVs overlapping - html

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" />
Login |
<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><img src="/images/btn_layers.png" alt="Layers" />Layers</li>
<li><img src="/images/btn_maps.png" alt="Layers"/>Maps</li>
<li><img src="/images/btn_admin.png" alt="Layers"/>Admin</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.