How to apply overflow:hidden;? - html

Question

I need to hide the .content-section when going out the limit of #page.
I need to use overflow:hidden; but I cannot get the desired result applying on #page.
Any idea how to fix it?
http://jsfiddle.net/Pet8X/1/
<div id="btn-up" onclick="moveUp();">UP</div>
<div id="btn-down" onclick="moveDown();">DOWN</div>
<div id="page">
<div id="bar-header">Header</div>
<div id="content">
<div class="content-section item1 ">
<a name="anchor-1"></a>
<h2>Content 1</h2>
</div>
<div class="content-section item2">
<a name="anchor-2"></a>
<h2>Content 2</h2>
</div>
<div class="content-section item3">
<a name="anchor-3"></a>
<h2>Content 3</h2>
</div>
<div class="content-section item4">
<a name="anchor-4"></a>
<h2>Content 4</h2>
</div>
</div>
<div id="bar-footer">Footer</div>
</div>
/*resetter */
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
background: transparent;
width: 500px;
height: 200px;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#bar-header, #bar-footer {
position: fixed;
left: 0px;
width: 500px;
height: 30px;
z-index: 100;
background-color: rgba(50,50,50,0.5);
text-align: center;
}
#bar-header {
top: 0px;
}
#bar-footer {
top: 690px;
}
#btn-up, #btn-down {
position: fixed;
left: 1230px;
width: 50px;
height: 50px;
background-color: yellow;
outline: 1px solid black;
z-index: 200;
}
#btn-up {
top: 0px;
}
#btn-down {
top: 50px;
}
#content {
position: fixed;
}
#content-inner {
overflow: hidden;
}
.content-section {
background-color: lightgray;
outline: 1px solid black;
width: 50px;
}
/* content sizes */
.item1 { /* top is 0 */
height: 200px;
}
.item2 { /* top is 200 */
height: 400px;
}
.item3 { /* top is 600 */
height: 600px;
}
.item4 {
height: 800px;
}
.content-section h2 {
position: relative;
top: 30px; /**avoid to go under the header bar*/
}
.active {
background-color: violet !important;
}

Answer 1

You are referencing the ID of the sidebar container incorrectly.
Your rule states
#content {
position: fixed;
}
#content-inner {
overflow: hidden;
}
But there is no element #content-inner.
Use this instead:
#content{
position: fixed;
overflow: hidden;
}
This results in:
Fiddle

Answer 2

Just apply overflow-hidden to #content
#content{
position: fixed;
overflow: hidden;
}