Trouble aligning google map in layout

Hi Everyone,

I can’t seem to get to the bottom of this. I have a two-column layout; fixed left-hand sidebar and fluid google map embedded on the right. The layout also has a header.

The map just will not layout properly, either the top gets cut off or if I change the positioning of its <div> or the container its wrapped in, the footer (google copyright) gets off.

You can see how the page is rendering here:

Has anyone had this problem or knows how to fix it?


  • Jessica

Hi, well first of all remove the overflow:hidden you set on the body and HTML elements.

Now the user can scroll down the page to access the cropped parts of the google map. Is that what you wnated?

[edit]I don’t see a footer. Perhaps you would be interested in turning that page into a [url=]sticky footer?[ulr]

You have so many height:100%;'s set. You shouldn’t have that ;).[/edit]

Thanks Ryan. I removed the overflow:hidden - it has no impact. The map should fit into any size container w/o scrolling but for some reason, it’s not working here.

By the “footer” I mean the google logo on the left and the “map data / terms of use” on the right.

Also, I added a transparency to the header so you can see how the map is floating underneath it.