Div Shifted in Firefox...

I have a simple web page. For some reason, one of my div's (holding a bing map), is shifted way off to the right and up a bit. Here is the link:

http://70.38.38.174//where-does-this-drain-to/where-does-this-drain-go.html

Anyone experienced this before?

M

 

If you think you'll get better answers here than the other place you are greatly mistaken.

 

At to that map style:

float: left;
margin: 40px 0px 40px 0px;

That should fix it...

 

That works! Thanks...However, now it is a little messed up in Chrome....Cross browser fun for sure!

 

It's better to fix it first in FF then fixing it for other browsers. Whats wrong with it in chrome?

 

I needed to add a float: left; to the content I had below the map. Otherwise in Chrome, the Title of the Content showed up above the map. Thanks again for your help. I'm interested to learn why adding this float: left;margin: 40px 0px 40px 0px; fixed it though. Why did it work fine in other browsers, just not Firefox?

 

Well the plugin is already floated. Since they are relative to each other, it doesn't move below, instead it moves i.e. floats to the left relative to the previous container. By adding float left, you are forcing it to move to the left diregarding the relative position of the previous container. The margins are just there to make the edges spaced out evenly.

Yes adding a float to the next header or container will allow it to move freely to the left as well instead of overlapping in other browsers...