Menu
I am trying to keep the header still and have the rest of the content scroll underneath it. I am able to achieve this, however when I put a fixed position on my two header divs the break out of the margin auto.
css:
.structure {
width:960px;
padding:20px;
margin:0px auto 0px auto;
background:#121212;
border-left:5px #F06BA8 solid;
border-right:5px #F06BA8 solid;
}
.header_home_structure {
width:960px;
margin:0px auto 0px auto;
position:fixed;
height:80px;
}
.header_home_bg {
width:100%;
background:#121212;
border-bottom:3px #F06BA8 solid;
height:80px;
position:fixed;
}
html:
<body>
<div class="header_home_bg clearfix">
<div class="header_home_structure clearfix">
</div>
</div>
<div class="structure clearfix">
</div>
</body>
517
Just use position: fixed on the container div, don't use it twice
Demo
.structure {
width:960px;
padding:20px;
margin:0px auto 0px auto;
background:#121212;
border-left:5px #F06BA8 solid;
border-right:5px #F06BA8 solid;
}
.header_home_structure {
width:960px;
margin:0px auto 0px auto;
height:80px;
}
.header_home_bg {
width:100%;
background:#121212;
border-bottom:3px #F06BA8 solid;
height:80px;
position:fixed;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
