Map Won't Resize to Fill Div

I am working on a menu called "rightPanel" that slides left and right. I have a div called "leftPanel" that contains another div called "mapDiv", which contains the map. When rightPanel slides to the right, both leftPanel and mapDiv are stretching to fill the space where rightPanel used to be. However, the map is not updating to fill this space. I've tried using map.refresh(); but this seems not to do anything to my map. Anybody see what's going wrong? jsfiddle

Hi Robert, thanks for quick reply. I added map.resize() and map.reposition() but it seems to be having a strange effect. About half of the space vacated by rightPanel now gets filled, but not all of it?

Hi Chris, thank you for your suggestions. The solution you provided does work in IE but not in Chrome - I'm not sure what happened to the lock icon but it's not visible in Chrome anymore. However the map goes behind the menu when I would prefer it to be be beside. I'd like to keep the CSS as it was, it was functioning as I wanted it to, it was just the map itself that wasn't stretching to fill the white space.

Robert's suggestion of using map.resize() did work also, but only resizes the map to fill about 1/2 the space left when rightPanel slides...I wonder if this is because map.resize() and rightPanel's animation are happening simultaneously? I'm not sure how I should get around this?