Fluid-width Google maps

I have a 2 column layout for the website, with the left fixed-width column and a right fluid-width Google maps that fills the rest of the width not taken by the left column.

Problem: However I cannot seem to get Google maps <div id="map_canvas"> to be fluid and take up the rest of the width. Did I set it up wrongly? Thanks!

HTML

<div id="main_container">
    <div id="sidebar"></div>
    <div id="map_container">
            <div id="map_canvas"></div>
    </div>
</div>

CSS

#main_container {
    width: 100%;
    height: 500px;
    float: left;
    clear: both;
    position: relative;
    z-index: 1;
}

#map_container {
    height: 100%;
    float: left;
    position: relative;
}

#sidebar {
    width: 270px;
    float: left;
}

#map_canvas {
    height: 100%;
    min-width: 100px;
    float: left;
    display: block;
    position: absolute;
    z-order: 1000;
}