how do I get my html Div to resize in sync with other elements.

Question

So I am making a web page, and when I zoom in or out on any web browser on the webpage, everything shrinks in the same proportion, which is fine. However, when i start to use a DIV that i position absoluteness, i do not get the same effect. When zooming out, the div does not stay in proportion with the other elements on the page. How can i position something absolutely, but keep it relative to everything else... if at all possible! thanks.

Answer 1

You must handle window resize event and manualy calculate new width/height of your div.

in jQuery:

$(window).resize(function() {
  $('#div_foo').height( $(this).height()/2 );
});