How to maintain aspect ratio when resizing a DIV?

You can create containers that maintain a constant aspect ratio by using padding-bottom as a percentage. The CSS specifications says that padding-bottom is defined relative to the "width", not height, so if you want a 4:3 aspect ratio container you can do something like this:

<div style="width: 100%; position: relative;padding-bottom: 75%;">
  <div style="position:absolute;left:0;top:0; right:0; bottom:0;">
    This content will have a constant aspect ratio that varies based on the width.
  </div>
</div>