Question

I’m trying to display a sidebar on the left side of a google map. The sidebar width is 380px and I need the map canvas div to take up the remaining width but I have no luck so far accomplishing this.

The map div must have width and height declared, otherwise it doesn’t work.
I was trying to find a width 100% minus X pixels solution but no of them is working in this case.

Does anyone has an idea how to do it?

Thanks.

I tried this, but it looks that it doesn’t apply to the map canvas div:

$(document).ready(function(){
$(window).width();  
$(document).width();

var width1 = $(document).width();
var width2 = $("#left").width();

var canvas_width = width1 – width2 + "px";

$('#map_canvas').width = canvas_width;

});

Answer 1

I am doing this (also sidebar + GM) with relative width and min-widths. I can toggle the sidebar visible / invisible. In order to save the original values see: Getting values of global stylesheet in jQuery ).

Btw, I think you assignment in js is wrong, it should be element.**style**.width or in jQuery $("#id").width(value):
How to set width of a div in percent in JavaScript?

The styles:

#sideBar {
float: left;
width: 27.5%;
min-width: 275px;
height: 100%;
z-index: 0;
}

#sideBarLocation div {
display: inline;
}

#mapCanvas
{
width: 72.5%;
min-width: 725px;
height: 100%;
float: left;
z-index: 0;
}

with HTML:

<div id="sideBar">
            <!-- tab location starts here -->
            <table id="sideBarLocation" class="sideBarStandard">
            ...
            </table>
</div>
....
<!-- side bar ends here -->
<div id="mapCanvas"></div>