Responsive iframe (google maps) and weird resizing

Question

I am trying to add a Google Map to my design, which should be responsive. I used the same code that works for images ... But for some reason, the iframe map is resizing with dimensions that I did not select.

HTML

<iframe src="http://maps.google.com/maps/ms?vpsrc=6&amp;ctz=-480&amp;ie=UTF8&amp;msa=0&amp;msid=210840796990572645528.00049770919ccd6759de3&amp;t=m&amp;ll=30.751278,68.203125&amp;spn=84.446143,175.429688&amp;z=2&amp;output=embed" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="635" height="300"> </iframe>​ 

and CSS

 iframe { max-width: 100%; height: auto; width: auto; /*IE8 bug fix*/ vertical-align: middle;} 

Or you can watch it live and play with it here: http://jsfiddle.net/corinne/pKUzU/ (If you turn off CSS, you'll see what I mean).

My question is how to make this iframe / map susceptible without losing the desired height?

Answer 1

This decision is from Dave Rupert / Chris Coyer (I think). This requires a div shell, but it works very well.

HTML

  <div class="iframe-rwd"> <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Seattle,+WA&amp;aq=0&amp;oq=seattle&amp;sll=37.822293,-85.76824&amp;sspn=6.628688,16.907959&amp;t=h&amp;ie=UTF8&amp;hq=&amp;hnear=Seattle,+King,+Washington&amp;z=11&amp;ll=47.60621,-122.332071&amp;output=embed"></iframe><br /><small><a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=Seattle,+WA&amp;aq=0&amp;oq=seattle&amp;sll=37.822293,-85.76824&amp;sspn=6.628688,16.907959&amp;t=h&amp;ie=UTF8&amp;hq=&amp;hnear=Seattle,+King,+Washington&amp;z=11&amp;ll=47.60621,-122.332071" style="color:#0000FF;text-align:left">View Larger Map</a></small> </div> 

CSS

 .iframe-rwd { position: relative; padding-bottom: 65.25%; padding-top: 30px; height: 0; overflow: hidden; } .iframe-rwd iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }