div.main-box {
position:relative;
text-align:left;
overflow:hidden;
width:99.3%;
background:#C0C0FF;
border:solid 4px black;
}
div.top-box {
#background:#D0D0FF;
border-bottom:solid 4px black;
}
div.bottom-box {
#background:#C0C0FF;
border-top:solid 4px black;
}
div.center-box {
position:relative;
width:100%;
left:13%;
#background:#C0C0EF;
border-left:solid 4px black;
}
div.reset-box {
position:relative;
width:100%;
left:100%;
margin-left:-12%;
} 
div.right-box {
position:relative;
width:100%;
margin-left:-170px;
left:-10px;
#background:#C0C0FF;
border-left:solid 4px black;
}
div.content-box {
position:relative;
width:100%;
margin-left:-100%;
left:170px;
}
div.left-col {
float:left;
width:15%;
}
div.right-col {
float:right;
width:170px;
}
div.ruby-code {
background:#B0B0B0;
}
div.center-col {
margin-left:15%;
margin-right:170px;
padding-left:0px;
padding-right:15px;
}
* html div.center-col {
height:1%;
margin:0px;
}
* html div.left-col {
margin-right:-0px;
}
* html div.right-col {
margin-left:-0px;
}
* html div.ruby-code {
background:#B0B0DF;
margin-left:-60px;
}

.clearfix:after {
content: "."; 
display: block;
height: 0px;
clear: both; 
visibility: hidden;
}
.heightfix:before {
content:'.';
display:block;
visibility:hidden;
height:0;
}