I designed a three-column layout for my web application, with the first two columns serving as the menu and submenu, and the third column acting as the main viewport. However, I encountered an issue where the second column (div) does not scroll when the main viewport is scrolling, even though it displays a scrollbar. Can anyone help me identify what I might be doing wrong?
<div id="container">
<div id="top" class="clearfix">
Header
</div>
<div id="container_menu">
<ul id="menu">
<li>Content for the Menu goes here</li>
</ul>
</div>
<div id="container_submenu">
<div id="submenu">
Submenu content goes here
<strong>Why is this div not scrolling properly? (It shows a scrollbar but doesn't scroll)</strong><br />
Placeholder text<br />
</div>
</div>
<div id="main">
Placeholder text<br />
</div>
CSS
* {
margin: 0;
padding: 0;
}
.clearfix:before, .clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
zoom:1;
/* For IE 6/7 (trigger hasLayout) */
}
body, td, th {
}
body {
background: #fff;
}
div#container {
min-width: 800px;
/*TODO*/
width: 100%;
}
div#top {
width: 100%;
height: 50px;
background: #000;
color: #fff;
position: fixed;
left: 0;
top: 0;
z-index: 5;
}
/* MENU */
div#container_menu {
background: #666;
position: fixed;
left: 0;
top: 0;
width: 180px;
margin-right: -180px;
height: 100%;
}
ul#menu {
margin-top: 50px;
}
/* SUBMENU */
div#container_submenu {
z-index: -1;
background: #ebeef5;
color: #999;
position: fixed;
left: 180px;
top: 0;
width: 250px;
height: 100%;
margin-right: -250px;
height: 100%;
overflow: scroll;
}
div#submenu {
margin-top: 50px;
}
div#main {
margin-left:430px;
margin-top: 50px;
}