Wrapping causing the map to appear incorrectly?

Hello everyone, I am new to this forum. So please bear with me. I have this problem with displaying the map. Please check this js fiddle:

http://jsfiddle.net/B7zU8/1/

If you change <span> tag in the code to <div> tag, suddenly the map doesn't appear full screen anymore. There is a height:400px added to code. However, I would love this to be full screen without or without <div> tag wrapping around the map div. Could this be done? I am using masterpage so I am relying on a lot of div tag.

I have made this video clip just to show what's I am talking about.

http://screencast.com/t/DvLTca1PHv

Thanks