Height=Width

by matmat

HTML

<div class='appliboxRound'> 
	<div class='content'>
	    <div class='InnerApp1'>
            a
         </div>    
	</div> 
</div>

CSS

.appliboxRound{
	position: absolute;
    top:10%;
    left:50%;
    margin-left:-150px;
	width: 500px;		/* desired width */
    background:gainsboro;
}
.appliboxRound:before{
	content: "";
	display: block;
	padding-top: 100%; 	/* initial ratio of 1:1*/
}
.content{
	position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
    padding-left:33%;
    padding-right:33%;
    padding-top:40%;
    padding-bottom:40%;
}
.InnerApp1{
    background:red;
    height:100%;
}