css fluid layout with Google Map

Question

I've been working on a layout for a site recently and have gotten stuck with the CSS. I like to think that I could follow the simple tutorials for a 2 column footer layout, but I keep getting stuck with the content of one of the columns.

The two column design would be left-side fluid Google Map and right side fixed width sidebar. I have tried following many examples of this sort of layout, but I always come to the problem with maintain the fluid side with the Google Map. Mainly the Google Map doesn't like to remain fluid. I have tried every CSS solution I could find with negative margins, floats, abosulte positioning (GMaps really hates this), and even tried tables (shudder).

Does anyone have any idea to handle this problem?

Answer 1

Take a look at Yahoo YUI grids.

Yahoo YUI grids

The YUI CSS framework provides a very customizable number of grid layouts. Page widths vary from 750px, 950px, 974px and 100% & there are templates that provide both fixed left & right column widths - all guaranteed to work correctly across multiple browsers. Their choice of sizes is also related to common advertising dimensions, making it easier to fit ads if you so desire. All pages on Yahoo use these layouts..

You also have the option to incorporate 'reset' capabilities so that all browsers are set to a common layout with regard to fonts, padding, margin, etc.

It has made foundational web page development a much easier, less finicky process for me!