CSS-Styled div does not scroll with parent div - html

Question

I am using some css styled checkboxes and want to have a parent container (I am using a div) to scroll when they overflow a certain height. I am currently using this:
/**
* Menu Styles
*/
.fieldset-auto-width {
display: inline-block;
}
.menu_header
{
vertical-align:middle;
background-color:#d0eace;
padding-top:24px;
padding-bottom:24px;
padding-left:24px;
padding-right:24px;
width:500px;
}
.menu_button
{
padding-top:12px;
padding-left:8px;
width:50px;
vertical-align:middle;
}
.menu_description
{
padding-top:12px;
padding-left:8px;
padding-right:8px;
width:400px;
}
.created_by
{
display:inline-block;
float:right;
}
input,.container
{
background-color:white;
}
select
{
color: #000;
font-size: 12px;
background: transparent;
/*-webkit-appearance: none;*/
}
button, option {
background-color: white;/*#d0eace;*/
}
input[type=radio] {
visibility: hidden;
}
/**
* frnakRadio Buttons!
*/
.frnakRadio {
width: 24px;
height: 24px;
background: #ddd;
margin: 10px 10px;
border-radius: 100%;
position: absolute;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
}
/**
* Create the checkbox button
*/
.frnakRadio label {
display: inline-block;
width: 18px;
height: 18px;
border-radius: 100px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
cursor: pointer;
position: relative;
top: 3px;
left: 3px;
z-index: 1;
background: #333;
-webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
}
/**
* Create the checked state
*/
.frnakRadio input[type=radio]:checked + label {
background: #26ca28;
}
.checkname
{
display: block;
margin: 10px 35px;
}
input[type=text] {
height:2.2em;
padding:5px 5px;
margin-bottom: 10px ;
border-radius:.75em;
-moz-border-radius:.5em;
-webkit-border-radius:.5em;
text-transform:none;
width:200px;
background:-webkit-gradient(linear, left top, left 25, from(#FFF), color-stop(1%,#FFF), to(#d0eace));
background:-moz-linear-gradient(right, #EEEDEE, #d0eace); /* For Firefox 3.6 to 15 */
color:#000;
font-size:.9em;
}
input[type=text]:focus{
box-shadow:1px 1px 10px #446;
outline:none;
}
.crunch:hover
{
background-color: #d0eace;
font-weight:bold;
}
.centercontainer {
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
/*display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;*/
/* W3C */
display:box;
box-pack:center;
box-align:center;
display: inline-block;
}
.status
{
border-radius: 100%;
margin:0px 20px;
border: 1px solid black;
width: 15px;
height: 15px;
float:center;
}
.queued
{
background: yellow;
}
.running
{
background:green;
}
.failed
{
background:red;
}
.key
{
float: left;
width: 15px;
text-align: left;
margin: 2px 2px;
margin-left:25px;
display: inline-block;
}
.keytext
{
width: 80px;
float: left;
text-align: left;
margin: 2px 2px;
display: inline-block;
font-size:14px;
font:Times;
}
.helper {
position: relative;
padding: 5px;
width: 15px; height:15px;
cursor:pointer;
}
#loading-image {
margin:0 auto;
background-color: #c0dabd;
width: 128px;
height: 128px;
z-index: 50;
position:absolute;
left:45%;
top:40%;
margin:-0px 0 0 -0px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px;
}
//FRNAKCHECK!!!
input[type=checkbox] {
visibility: hidden;
}
.frnakcheckbox {
width: 24px;
height: 22px;
background: #fcfff4;
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
margin: -12px 5px auto;
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
position: absolute;
}
.frnakcheckbox label {
cursor: pointer;
position: absolute;
width: 20px;
height: 20px;
left: 2px;
top: 0px;
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
background: -o-linear-gradient(top, #222 0%, #45484d 100%);
background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
background: linear-gradient(top, #222 0%, #45484d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
}
.frnakcheckbox label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 16px;
height: 16px;
background: #00bf00;
background: -webkit-linear-gradient(top, #00bf00 0%, #009400 100%);
background: -moz-linear-gradient(top, #00bf00 0%, #009400 100%);
background: -o-linear-gradient(top, #00bf00 0%, #009400 100%);
background: -ms-linear-gradient(top, #00bf00 0%, #009400 100%);
background: linear-gradient(top, #00bf00 0%, #009400 100%);
top: 2px;
left: 2px;
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
}
.frnakcheckbox label:hover::after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
}
.frnakcheckbox input[type=checkbox]:disabled{
background: #FFFFFF;
background: -webkit-linear-gradient(top, #ffffff 0%, #009400 100%);
background: -moz-linear-gradient(top, #ffffff 0%, #009400 100%);
background: -o-linear-gradient(top, #ffffff 0%, #009400 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #009400 100%);
background: linear-gradient(top, #ffffff 0%, #009400 100%);
}
.frnakcheckbox input[type=checkbox]:checked + label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.checklabel {
margin: -10px 40px auto;
}
<div id="" style="overflow:auto; height:300px; display: inline-block;">
<b>Sample Text:</b><span class="helper" id="help1" style="color:blue;"><b>?</b></span>
<br>
<br>
<br>
<div class="fcheckbox">
<input type="checkbox" value="library_522">
<label for="control522"></label>
</div>
<div class="checklabel">522</div>
<br>
<div class="fcheckbox">
<input type="checkbox" value="library_523">
<label for="control523"></label>
</div>
<div class="checklabel">523</div>
<br>
</div>
This ends up looking like this: http://imgur.com/EPZ3SnQ
Notice that the actual check boxes aren't contained by the div but the labels are!
This is the CSS for the radio buttons: http://pastebin.com/up29LWCD
I am new to css and haven't quite gotten to understand how positioning works. Any help would be appreciated! I have tried a varying combination of style tags with no real progress...

Answer 1

They seem to work fine if you use them in a container and set the overflow?
/**
* Menu Styles
*/
.container {
margin: 10px;
border: 1px solid black;
height: 100px;
width: 100px;
overflow-y: scroll;
}
/**
* FRNAKCHECK
*/
.frnakcheckbox {
width: 24px;
height: 22px;
background: #fcfff4;
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#fcfff4', endColorstr='#b3bead', GradientType=0);
margin: -12px 5px auto;
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
position: absolute;
}
.frnakcheckbox label {
cursor: pointer;
position: absolute;
width: 20px;
height: 20px;
left: 2px;
top: 0px;
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 1);
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 1);
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 1);
background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
background: -o-linear-gradient(top, #222 0%, #45484d 100%);
background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
background: linear-gradient(top, #222 0%, #45484d 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#222', endColorstr='#45484d', GradientType=0);
}
.frnakcheckbox label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 16px;
height: 16px;
background: #00bf00;
background: -webkit-linear-gradient(top, #00bf00 0%, #009400 100%);
background: -moz-linear-gradient(top, #00bf00 0%, #009400 100%);
background: -o-linear-gradient(top, #00bf00 0%, #009400 100%);
background: -ms-linear-gradient(top, #00bf00 0%, #009400 100%);
background: linear-gradient(top, #00bf00 0%, #009400 100%);
top: 2px;
left: 2px;
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
}
.frnakcheckbox label:hover::after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
}
.frnakcheckbox input[type=checkbox]:disabled {
background: #FFFFFF;
background: -webkit-linear-gradient(top, #ffffff 0%, #009400 100%);
background: -moz-linear-gradient(top, #ffffff 0%, #009400 100%);
background: -o-linear-gradient(top, #ffffff 0%, #009400 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #009400 100%);
background: linear-gradient(top, #ffffff 0%, #009400 100%);
}
.frnakcheckbox input[type=checkbox]:checked + label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.checklabel {
margin: -10px 40px auto;
}
<b>Sample Text:</b>
<span class="helper" id="help1" style="color:blue;"><b>?</b></span>
<div class="container">
<div class="fcheckbox">
<input type="checkbox" value="library_522">
<label for="control522">522</label>
</div>
<br>
<div class="fcheckbox">
<input type="checkbox" value="library_523">
<label for="control523">523</label>
</div>
<div class="fcheckbox">
<input type="checkbox" value="library_522">
<label for="control522">522</label>
</div>
<br>
<div class="fcheckbox">
<input type="checkbox" value="library_523">
<label for="control523">523</label>
</div>
<div class="fcheckbox">
<input type="checkbox" value="library_522">
<label for="control522">522</label>
</div>
<br>
<div class="fcheckbox">
<input type="checkbox" value="library_523">
<label for="control523">523</label>
</div>
<div class="fcheckbox">
<input type="checkbox" value="library_522">
<label for="control522">522</label>
</div>
<br>
<div class="fcheckbox">
<input type="checkbox" value="library_523">
<label for="control523">523</label>
</div>
<br>
</div>