Unknown CSS issue- Divs won't stack and I've lost all perspective as to why that might be

Unknown CSS issue- Divs won't stack and I've lost all perspective as to
why that might be

Here is the example fiddle- http://jsfiddle.net/k3bmN/3/
I intended to have the purple colored object fit inside of the yellow
colored box (effectively covering it up) while the jquery UI buttons float
on top of the whole 'window' I've made. The menu tab and buttons should
float over the object.
I'm instead having issues even getting the divs to stack. Black is #main
and the object is being pushed outside of it

<div id='main'>
<div id='foo' class='abox'>
<div class='boxholder'>
<div class='menutab' onClick='menutog(this)'></div>
<div class='buttons'>
<label for='drag'>Drag</label>
<input id='drag' type='checkbox'></input>
<label for='size'>Size</label>
<input id='size' type='checkbox'></input>
<label for='chat'>Chat</label>
<input id='chat' type='checkbox'></input>
<label for='close'>Close</label>
<input id='close' type='checkbox'></input>
</div>
<object class='ttvvideo'></object>
</div>
</div>
</div>
#main {
width: 100%;
height: 100%;
background-color: black;
}
.abox {
width: 320px;
height: 178px;
background-color: red;
display: inline-block;
}
.boxholder {
width: 100%;
height: 100%;
background-color: yellow;
}
.menutab {
float: left;
top: 0;
left: 0;
width: 10px;
height: 21px;
background-color: #6441a5;
z-index: 2;
}
.buttons {
font-size: .55em;
margin-left: 27px;
}
.ttvvideo {
top: 0px;
width: 100%;
height: 100%;
background-color: purple;
}