Hey!
I would like to get some info about how to make a websites header and the body work together.
Example, if I have a fixed header div (always top, moves with the browser scroll, that contains menu and other stuff) and a relative(not fixed) body div.
So the concern: Because the CSS position “fixed” moves over other layers, I have set the body div top margin to 180px(taken count the size of the fixed top header). All looks nice until the fixed top header layer gets bigger like 200px of height, instead of 180px, it covers a little bit of the body div area.
How can I make a body(not fixed position) to follow the header(css position fixed)?
Website layout:
----This is CSS fixed header content(position:fixed)—
----this is sites body, even if the header gets bigger, please don’t go over me—
----this is websites footer—
CSS:
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 180px;
clear: both;
background-color: #0a0a0a;
z-index: 2;
display: block;
}
.bodyx {
border: 2px solid #000;
border-radius: 5px;
padding: 10px;
width: 70%;
clear: both;
background-color: #b5b1ab;
margin-left: auto;
margin-right: auto;
margin-top: 185px;
display: table;
}
Thank you!