Check out My Fiddle
Here's the code snippet showcasing how I typically create a floating header. Is there a more efficient way to achieve this, or any new trends in handling floating headers?
HTML
<div id="header">
Header
</div>
<div id="page">
Content goes here
</div>
CSS
#header {
height: 50px;
width: 100%;
background: #6cc3eb;
z-index: 990;
position: fixed;
top: 0;
left: 0;
}
#page {
height: 200px;
width: 100%;
margin: 50px 0 0 0;
background: #ddf2fc;
}
Any tips or suggestions would be greatly appreciated.