CSS: Keeping a div's height relative to its width [duplicate]

Answer 1

You can also use the solution I described in Responsive square columns.

It is based on the fact that % padding-top/bottom and margin-top/bottom are calculated according to the whidth of the parent element.

Adapted to your situation it would look like this :

FIDDLE

HTML :

CSS :

.wrap{
    position:fixed;
    width:100%;
    padding-bottom:16.666%; /*  100x1/6 = 16.666...*/
}
.content{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}