div{
float: left;
}

#container {
background-color: purple;
height: 1800px;
margin-bottom: 40px;
width: 80%;
margin-left: 10%;
/*stop using margin auto, does not work with float*/
/*float is needed to make your website mobile freindly with percentage*/
clear: both;
}


.contentholder {
background-color: lightgreen;
/* two boxes need to be side by side, no clear out*/
float: left;
clear: none;
/* we do not want to clear others left and right*/
 /* if I add padding I must reduce the width , can't exceed 100% */
width: 50%;
padding-left: 5%;
padding-right: 5%;
margin-left: 5%;
margin-right: 5%;
/* total is 70 */
margin-top: 10px;
/* no height, means the parent will always fit and grow for the kids */
font-size: 150%;
}



.sidebarofmenus {
width: 20%;
margin-left: 2%;
margin-right: 2%;
/* total is 24 */

margin-top: 10px;
background-color:  skyblue;
height: 300px;
clear: none;
/* we do not want to clear others left and right*/
text-align: center;
}


.menubox { 
width: 80%;
margin-bottom: 5px;
/* percent never works with height  */
background-color: black;
color: white;
/* text color white*/
font-size: 14pt;
/*measure fonts in pt point size*/
font-family: Comic Sans MS;
}

img {
width: 50%;
margin-left: 25%;
margin-right: 25%;
float: left;
clear: both;
}


/* paste code from mr rowe's button repair page  4.1 */