Google Map Won't Scale 100%

I am trying to set google map to load 100% width and height within a table. The problem is if you set 100% as either, they map doesn't load. It will only accept a px figure.

I want the table to be 100% width and height, the sidebar to be 200px, and the remaining map to be 100% whatever is left.

Any ideas?

    <table border="1"> 
      <tr> 
        <td> 
           <div id="map_canvas" style="[B]width: 1000px; height: 600px[/B]"></div> 
        </td> 
        <td valign="top" > 
           <div id="side_bar" style="width:200px;height:450px; text-decoration: underline; color: #4444ff; overflow:auto;"></div> 
        </td> 
      </tr> 
    </table> 

Code (markup):

 

I have added a small google map to map.html which is currently sized at 500px by 500px. This is working fine when loaded in the browser. However when loading map.html from within a 600px by 600px iframe, the map goes all stupid. Any ideas why this is?