title: Make flash file scale to div width and maintain height according to its aspect ratio
body: <p>We're having a problem to make a flash file scale 100% according to the parent div width, while still maintaining the height according to its aspect ratio.</p>
  
  <p>Please check out the code on jsFiddle (http://jsfiddle.net/LgegF) or paste the below code into an empty html-page:</p>
  
  <pre><code>&lt;!doctype html&gt;
  
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
  
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
          swfobject.embedSWF("http://www.diescon.net/yellowfestival/400x400.swf", "flash-content", "100%", "100%", "9.0.0", '', null, {wmode: 'transparent'});
      &lt;/script&gt;
  
      &lt;style type="text/css"&gt;
          body {
              background-color: #ccc;
              margin: 0;
          }
          #container {
              width: 400px; /* Fixed width according to page template */
              height: auto; /* Container height should adapt to the content, we do not want to set a fixed height here */
              background-color: pink; /* Background of container */
              position: absolute;
              top: 0;
              left: 0;
          }
          #flash-content {
              width: 400px; /* Fill the width of the parent, could be fixed but ideally 100% */
              height: 100%; /* We want the height of the flash object/flash content to scale according to the aspect ratio of the swf, we do not want to set a fixed height here */
          }
  
          /* This is what we really want */
          #what-we {
              width: 400px;
              height: auto;
              background-color: pink;
              position: absolute;
              top: 0;
              right: 0;
          }
          #really-want {
              width: 100%;
              height: 400px; /* This is what we really want, but without setting this height fixed */
              background-color: yellow;
          }
      &lt;/style&gt;
  &lt;/head&gt;
      &lt;div id="container"&gt;
          &lt;div id="flash-content"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="what-we"&gt;
          &lt;div id="really-want"&gt;
              &lt;span&gt;This is what we really want&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>