I am having an issue with a horizontal line separating my header from the body content. I want it to stay in place when scrolling, but when I try to set it to a 'fixed' position, it behaves strangely. Can someone please assist me with this problem? Thank you.
Below is the HTML code:
<div id="wrapperfull">
<div class="fitter">
<div id="head">
<div id="header">
<a href="index.html"><img src="../Images/Header2.png" width="379" height="99" alt="Just Joel Header"></a>
</div><!-- end header div -->
<div class="navigation">
<div class="menu-holder">
<ul class="menu">
<li><a href="index.html">HOME</a></li>
<li><a href='print.html'>WORK</a>
</li>
<li><a href="photography.html">PHOTOGRAPHY</a>
</li>
<li><a href="blog.html">BLOG</a>
</li>
<li><a href="inspired.html">INSPIRED</a>
</li>
</ul>
</div>
<!-- menu-holder end -->
</div><!-- end navigation div -->
</div>
</div>
<div class="bottom-color">
</div>
<div class="heading">
<h1>SHOWCASE</h1>
</div>
And here is the CSS code:
#wrapperfull {
min-height: 100%;
width: 1050px;
border: thin;
border-color: #00BDE5;
margin-top: 0px;
background-color: #FFF;
position: relative; /* for the absolute positioned footer */
margin: auto;
margin-bottom: auto;
padding-top: 0.1px;
padding-right: 40px;
padding-bottom: 0px;
padding-left: 30px;
}
.fitter {
height: 115px;
width: 1050px;
background-color: #FFF;
}
.bottom-color {
height: 15px;
color: #00BDE5;
border-style:solid;
border-bottom-width: 1px;
border-right-width: 0px;
border-left-width: 0px;
margin-bottom: 20px;
}
#head {
height: 100px;
width: 1070px;
border: none;
margin: auto;
background-color: #FFF;
position: fixed;
z-index: 1;
}
#header {
height: 125px;
width: 1050px;
font-family: Helvetica, sans-serif;
position: fixed;
background-color: #FFF;
margin-top: 0px;
}
.navigation {
height: 75px;
width: px;
float: left;
margin-top: 0px;
margin-left: auto;
padding-top: 20px;
font-family: "geogtq sb";
position: fixed;
background-color: #FFF;
}