Google Maps CSS
July 8, 2005 9:54 AM   Subscribe

How does the CSS on Google Maps work?

I'm trying to understand how they managed to get a fixed-height header, a fixed-width right-hand column, and a div in the left-hand column that fills the remaining width and height. (Watch the behavior of the map as you resize your browser window.)

Looking at the source code itself is less than helpful.

Google searches have turned up this, which is close to what I want, but the height is fixed, not fluid. This is also close, but the center div doesn't actually fill all the pink space, it only surrounds the center text.
posted by event to Computers & Internet (8 answers total)
I don't know, but on their downloadable kit, they have that div set in absolute pixel values. Doesn't allow percentages. I'm going to assume that they have a browser size calculator that automatically changes the size of the map DIV according to the size of the browser.

What is it you're trying to do?
posted by jsavimbi at 10:02 AM on July 8, 2005

Response by poster: I've been playing with the Google Maps API and I'm trying to put together a map toy with the same general appearance as

I don't think it would be too hard to do this with Javascript, but I was rather hoping I could get it with just CSS.
posted by event at 10:13 AM on July 8, 2005

I haven't looked at the actual code for Google Maps, but perhaps it uses something like a "jello" CSS layout?
posted by geeky at 10:25 AM on July 8, 2005

The problem is that you cannot modify the JS file that lives on the Google server.

For now.
posted by jsavimbi at 11:05 AM on July 8, 2005

Response by poster: When you create the map object it uses its containing div to determine its width and height. So it really should just be a matter of getting a div to behave correctly, and the map will follow suit. In theory.
posted by event at 11:16 AM on July 8, 2005

Why then does it only accept pixels or null vs. percentages?
posted by jsavimbi at 11:46 AM on July 8, 2005

Response by poster: I'm not sure I understand your question, but if you create a div as a container for the map and size it using percentages, the map will fill the container, whatever the shape of your browser window.
posted by event at 12:54 PM on July 8, 2005

Response by poster: Thanks guys for your help. I've managed to find a solution. I'm including it here for future Googlers.

I used this suggestion for absolute positioning, allowing me to fix absolutely each corner of the div. It doesn't work in IE, though, without this workaround.
posted by event at 1:34 PM on July 8, 2005

« Older How to camoflauge a pimple for a portrait   |   what direction will the hudson river be flowing on... Newer »
This thread is closed to new comments.