I'm struggling to create a layout with specific requirements:
- A navigation header that has a fixed height and position from the top
- A wide horizontal image banner that is fixed but resizable with the main window
- A content area where text starts below the image banner, with an auto scrollbar
- An information footer with a fixed height and position from the bottom
The issue I'm facing lies with requirement #3 - the content text area. I can't use a fixed position due to the resizable image, nor can I use a relative position by placing the content DIV within the image DIV as this causes the image to scroll along with the text. It seems like making the content text a child of the image banner is necessary due to the variable image size, but I'm unable to achieve the desired outcome.
HTML:
<div id="nav">
... navigation banner ...
</div>
<div id="topimg">
<img src="images/01-shop.jpg" width="100%">
<div id="content">
... text ...
</div>
</div>
<div id="footer">
... footer content ...
</div>CSS:
#nav {
position: fixed;
height: 47px;
width: 90%;
margin-left:5%;
margin-right:5%;
}
#topimg {
position: fixed;
width: 80%;
margin-left:10%;
margin-right:10%;
top: 90px;
}
#content {
position: ???;
width: 80%;
margin-left:10%;
margin-right:10%;
overflow: auto;
}
#footer {
position: fixed;
height: 27px;
width: 90%;
bottom:10px;
margin-left:5%;
margin-right:5%;
}If anyone has suggestions on how to resolve this, I would greatly appreciate it!
Thank you in advance!