How to make a divs width equal to its height

Question

I am building a responsive website which means I cannot deal in fixed widths and heights. In theory, the container should be 60% the width of the page and the height must match that. The question: how do i maintain the same width and height on a responsive page.

    <div id="container">
      <div id="circle">
      </div>
    </div>

#container {
   height:400px; width: 400px;
   padding:1%;
}
#circle {
   background-color:blue;
   border-radius:50%;
   height:96%; width:96%;
   position:absolute;
}

Here is a fiddle Thanks

Answer 1

This may not be the optimal way, but here is an example using jQuery to set the width to the height of the div on window resize. Here's the fiddle.

$(window).resize(function() {
$('#container').width($('#container').height());
});

Answer 2

Ok, now i understand your problem.

Use this CSS

#container {
   padding-bottom:100%;
   position:relative;
   width: 60%;
   height: 100%;
}
#circle {
   background-color:blue;
   border-radius:50%;
   width:96%;
   padding-bottom:100%;
   position:absolute;
}

Fiddle