Seeking help with a message_container division that contains a fixed scrollable message_header division and a scrollable message_body division. The issue I am facing is that the content of the message_body division is appearing behind the fixed div. How can this be resolved?
UPDATE: After some modifications, I now have an overflowing message_header division and a message_body division. While the message_header looks good, the message_body appears okay but still scrolls up behind the message_header. How can I address this? Just to clarify, this code is within a modal window, which I omitted initially as I didn't think it was necessary for solving my issue.
I have replicated the problem in this JSFiddle. I made the first content entry longer, so it appears behind the header division and becomes visible when you scroll. My goal is for the content to start below the fixed header division, not hidden behind it.
CSS Code Snippet:
.message_container {
width=600px;
height=395;
}
.message_header {
padding-bottom: 5px;
font-size: 14px;
position: fixed;
width:500px;
height:50px;
background-color: lightgrey;
overflow-y:auto;
}
.message_body {
overflow-y:auto;
padding-top:50px;
}
HTML Code Snippet:
<div class="message_container">
<div class="message_header">
<p> test </p>
<p> test </p>
<p> test </p>
<p> test </p>
</div>
<div class="message_body">
<p>content is longer</p>
<p>content </p>
... (repeated content)
</div>
</div>
Edit: It's unfair when people downvote without providing a helpful answer. Constructive criticism would be more beneficial. I've extensively researched this issue and require assistance. Thank you.
Edit: Updated CSS classes to be less generic.
Solution:
Thanks to @Pete for the solution. Both the message_body and message_head divisions lacked defined widths and heights even though the message_container was later assigned specific dimensions. I revised my example, and here's the updated link : http://jsfiddle.net/kcfTc/59/
The revised CSS snippet includes:
.message_container {
width=600px;
height=395;
position: relative; //new
}
.message_header {
padding-bottom: 5px;
font-size: 14px;
position: fixed;
width:600px; //new
height:50px; //new
background-color: white; //modified
overflow-y:auto;
}
.message_body {
overflow-y:auto;
top:55px; //new
bottom:0; //new
left:0; right:0; //new
width: 100%; //new
position: absolute;//new
}