Hello I am having problems with my "sticky" header. First I was using StickyPanel(addon) but it seems to fight with the sliding gallery the client wants to use and wont load when both are being used at once.
So I moved to a more simple jquery option, but when I would scroll it would break and move to the left of the content.
So I have gone for a more simple approach and used a Fixed position for the header. However, it seems to break out of it's parent div on the right side. Here is an example. Looks great in chrome, broken in FF and IE.
And I am posting the code as per the site rules.
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
width: 90.675%;
padding-left: 0%;
padding-right: 0%;
max-width: 1600px;
margin: auto;
clear: none;
float: none;
z-index:999;
margin-left: auto;
background-color: #8E8E8D;
}
#header {
z-index:998;
width: 100%;
height: 90px;
background-color:#2A2A2A;
position: fixed;
float:left;
border-bottom-width: 8px;
border-bottom: solid;
border-bottom-color: #fafafa;
}
#body1 {
background-color: #8e8e8d;
float:left;
width: 100%;
height: 980px;
}
#body2 {
float:left;
}
#footer {
float:left;
}
#body3 {
float:left;
}
.zeroMargin_desktop {
margin-left: 0;
}
.hide_desktop {
display: none;
}
}
and the HTML
</head>
<body>
<div class="gridContainer clearfix">
<div style="display: inline-block;" id="header">
<ul id="nav">
<li><a href="#">About</a>
<ul style="width: 7em; height: 80px;" >
<li style="margin-left:15px;"><a href="#overview_splash" class="lightbox">Overview</a> </li>
<li style="margin-left:15px;"><a href="#management_splash" class="lightbox">Management</a> </li>
</ul>
</li>
<li><a href="#">Services</a>
<ul style="width: 300px;" >
<li style="margin-left:15px;"><a href="#">Capabilities</a>
<ul style="margin: -30px 0 0 120px; height:auto;">
<li>Land Planning</li>
<li> Feasibility </li>
<li>Survey Coordination </li>
<li>Site Development</li>
<li>Project Management</li>
<li>Public Works</li>
<li>Alternative Energy</li>
<li>Oil Field Site Prep</li>
<li>Septic System Design</li>
</ul>
</li>
<li style="margin-left:15px;">I am a...
<ul style="margin: -30px 0 0 120px; height:auto;" >
<li> Developer</li>
<li> Contractor</li>
<li> Home Builder</li>
<li> Municipality </li>
<li> Private Land Owner</li>
<li> Architect </li>
<li> Other </li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Projects</a></li>
<li><a href="#contact_splash" class="lightbox">Contact</a></li>
</li>
</ul>
</div>
<div align="center" id="body1" >
<div class="flexslider">
<ul class="slides">
<li>
<img src="images/slide1.png" alt=""/> </li>
<li>
<img src="images/slide2.png" alt=""/>
</li>
<li><img src="images/slide3.png" alt=""/></li>
<li><img src="images/slide4.png" alt=""/></li>
<li><img src="images/slide5.png" alt=""/></li>
</ul>
</div>
</div>
<div align="center" id="body2">
<h1> This site is currently under construction, please check back soon </h1>
</div>
<div align="center" id="body3">
<div id="map-canvas" style="width: 100%; height: 420px"></div>
<div style="float:left"> <p style="color:#ffffff; margin-left: 150px;" align="center">
Andrew Mellen<br/>
Managing Partner<br/>
amellen@maverickentities.com<br/>
432.262.0616 ex.107
</p>
</div>
<div style="float:right">
<p style="color:#ffffff; margin-right: 150px;" align="center">
Jacqueline Mellen<br/>
Managing Partner<br/>
jmellen@maverickentities.com<br/>
432.262.0616 ex.104
</p>
</div>
</div>
<div align="center" id="footer"> </div>
<div class="cushycms" id="overview_splash" style="display:none; width: 960; height: 1000px; overflow:hidden;"><h1>Overview</h1>
<p align="center">mav∙er∙ick<br />
noun<br />
someone with an untraditional mindset, not afraid to break from the norm</p>
<br />
<p align="justify">Founded as a woman-owned civil engineering firm in Midland, Texas, our company embodies the Maverick name simply by doing things differently. With a hands-on, accessible team dedicated to executing projects with innovative, practical, and cost-effective solutions, Maverick exists to be a champion for our clients. We provide straightforward guidance and high-quality solutions without the unnecessary red tape.<br />
<br />
Maverick offers a full range of professional services in civil engineering & surveying, from land planning and development to infrastructure and public works. We work with both private and public sector clients, reviewing the potential and constraints of every site in order to prepare creative plans and development strategies. Maverick is licensed in Texas, New Mexico, and Colorado.<br />
<br />
It is our mission to better the community in which we work and live. We proudly support Big Brothers Big Sisters, MARC of Midland, YMCA Indian Princesses Program, and Washington Math & Science Institute.<br />
<br />
Maverick Engineering is a Maverick Entities company.<br />
</p>
<h2>Affiliations:</h2>
</div>
<div class="cushycms" id="management_splash" style="display:none; width: 960; height: 2200px; overflow:hidden;"><h1>Management</h1>
<p>Andrew L. Mellen, Jr., P.E. – Principal Civil Engineer</p>
<p>With over 13 years of experience in commercial and residential site development, Andrew oversees the design process and approves all plans generated by Maverick, ensuring each project meets the client’s objectives from conception to completion. He excels at coordinating multiple stakeholders with a client-oriented approach to satisfy project goals, municipality regulations, and client care. Andrew’s experience allows him to look at projects from a global standpoint and foresee potential hurdles, proactively addressing issues and making transparent communication a priority.</p>
<p>Engineering News Record - Texas & Louisiana 2012 Top 20 Under 40 Professionals</p>
<p>Texas Society of Professional Engineers - Permian Basin 2011 Engineer of the Year</p>
<p>Registrations: Texas, New Mexico, Arizona</p>
<p>Jacqueline Mellen – Operations Manager</p>
<p>Jackie brings more than a decade of business development experience to the table, with a refined skill set focused on the Engineering/Construction industry. Rest of Jackie’s bio goes here…</p>
<p>Andrew Hobby, E.I.T. – Project Engineer</p>
<p>Andrew is involved in all facets of engineering design and has helped execute over 150 Midland-area projects. Along with wide-ranging commercial and residential site development experience, he has an extensive background in water resources and serves as the lead engineer on drainage analyses and hydrologic studies.</p>
<p>Registrations: Texas</p>
</div>
</div>
</body>
</html>
Your Example code is incorrect. In layout.css you have two rules for #Header and both (lines 303 and 175) are using width: 1600px; rather than width:90.67%; like to containing element.
Update the rules and it works fine.