Почему мои DIVs перекрываются

Question

Может кто-нибудь скажет мне, почему мой div 'header' и div 'pageInnerWrap' перекрываются ... были беспорядочными, но не могут получить его ... любая помощь оценивается ... 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

Не удивляйтесь, у вас есть проблемы с этим кодом, получить отступ право, я думаю, что вам не хватает на закрытие </div> и есть недостающая кавычка:

<div style= "visibility:hidden;> 

Я попытался очистить его, но сдался, только вы знаете, какая часть должна быть где. Например поместить братьев и сестер на том же уровне таблиц:

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

Также на SO, вам нужно 4 пробела или табуляции перед кодом блока, но не более, просто посмотрите на свой вопрос, половина кода не требуется ведущие пробелы.