Fixed div at the top of a page - html

Question

I'm trying to create a page with a fixed div above the main div. The main div should be below the fixed div but instead it overlaps the fixed div.
Adding margin-top positions the main div below the fixed div but, it also clips the same amount off of the bottom of the page.
What am I doing wrong?
Live Demo
body {
background-color: #00FFFF;
}
.fixed {
width: 100%;
position: fixed;
background-color: #C0C0C0;
}
.main {
background-color: #FFFFFF;
}
.expand {
height: 800px;
}
<div class="fixed">
fixed div line 1<br />
fixed div line 2<br />
fixed div line 3<br />
</div>
<div class="main">
<div class="expand"></div> <!-- For demo purposes only -->
</div>

Answer 1

To achieve the effect that you're looking for, you can use a combination of display: table on a parent and display: table-row on each of the direct descendants.
Set height: 100% on html, body, .wrap, .main, .inner.
Wrap the current "parents" in a div with class .wrap
Set display: table and width: 100% on .wrap.
Set display: table-row on .fixed, .main
Wrap the text content of .main in a div with class .inner
Set overflow: auto on .inner
This way, no matter what the size of the top div is, the .main will always be underneath .fixed.
display: table is supported by IE > 7 and all other modern browsers.
html, body, .wrap, .main, .inner {
height: 100%;
margin: 0;
}
.wrap {
box-sizing: border-box; /* Include border width in sizing */
border: 8px solid #00FFFF; /* Use a border instead of relying on margins */
display: table;
width: 100%;
}
.fixed, .main {
display: table-row;
}
.inner {
overflow: auto;
}
.expand { height: 800px; }
.fixed { background-color: #C0C0C0; }
<div class="wrap">
<div class="fixed">
fixed div line 1<br />
fixed div line 2<br />
fixed div line 3<br />
</div>
<div class="main">
<div class="inner">
<div class="expand"></div> <!-- For demo purposes only -->
</div>
</div>
</div>

Answer 2

You just need to add margin-top to the main div that is equal to the height of the fixed div. For example, if you have a 24px tall fixed div:
#fixed-div {
position: fixed;
height: 24px;
}
#main-div {
margin-top: 24px;
}

Answer 3

Try adding "position: relative" on the top div.
<div style="width: 100%; opacity: .6; position: fixed; margin-left: auto; margin-right: auto; background-color: #C0C0C0; position: relative;">
fixed div line 1<br />
fixed div line 2<br />
fixed div line 3<br />
</div>

Answer 4

You need a top margin on you main div with a value greater then your fixed divs height So if your fixed div is 60px high Make a margin-top:62px for the main div also you could get rid of margin-left and right and do all margins like this margin:60px auto; if the 60px is no good for you on the bottom of the main div you could do margin:60px auto 0px auto;
Hope this helps
--Joshua Joseph Bissot

Answer 5

Have good answer, curtsey of Joshua K.
I'll define a class named no-js (can be any class name) which sets position of 'fixed' div to relative. That will put the "fixed" div above the main div - though not actually fixed in place. Then with JavaScript I set the div to position: fixed and set the margin-top of the main div to the height of the "fixed" plus a fudge factor of say 5 or 6 px.
That way if JavaScript is enabled, the "fixed" div will actually be fixed and the margin-top of the main div will move it down to show the entire div.
If JavaScript is not enabled, the "fixed" div will still be visible, and above the main div, but it will scroll with the page.
Can I mark an answer as best answer? If so, how?
Stop the presses;
I could just set the position of the "fixed" div to relative (in a CSS class or using stye= on the element) and use JavaScript to change it to fixed and set the margin-top of the main div accordingly. That, I think, removes the need for another class named no-js or such.
I have created another page incorporating the changes needed to accomplish the task. It is at http://thetesting.site/fixeddiv/fixedheader-fixed.html