width of GoogleMaps in table cell - html

Question

I'm trying to make a simple web interface with a table with two columns:
Left: width 400px
Right: the rest of avalaible width
I think that is very simple, but i can't do it. The more closer that I were from the success was with this code
HTML:
<table id="container">
<tr>
<td style="width: 20%">
<div id="sidebar" style="z-index:1;"></div>
</td>
<td style="width: 80%">
<div id="map_canvas" style="z-index:10;"></div>
</td>
</tr>
</table>
CSS:
#map_canvas {
position: absolute;
min-height: 99%;
height: auto !important;
height: 99%;
_height: 99%;
width: 80%;
}
but always appears the horizontal scroll bar and the map overflows the width of the window
Thanks, and sorry about my bad english...

Answer 1

The scroll is probably for the default margin of the body and also the border of your table. You can try this
HTML
<table id="container">
<tr>
<td style="width:400px">
<div id="sidebar" style="z-index:1;"></div>
</td>
<td>
<div id="map_canvas" style="z-index:10;"></div>
</td>
</tr>
</table>
CSS
* {
padding:0;
margin:0;
}
table {
width:100%;
border-collapse:collpse;
border:0 none;
}
Review this Demo http://jsfiddle.net/pTZKa/
Edit
As an asnwer for your commentary : That happens because you have positon:absolute so he is searching for his closest parent with a non absolute position declared to be positioned. To fix that add this on the css:
table td {
position:relative;
}
New Demo http://jsfiddle.net/pTZKa/4/