CSS layout for Google Maps v3

I am trying to create a layout that has a header followed by a content area with a left menu and the map. Below this is the footer.

My current issue is that the map extends an addition 250 px to the right - this is the same width as the left content area.

Once I have this figured out, my goal is to have it so that the user can click a button in the left menu to collapse the pane so they have a full screen map.

Code is below. Just insert your own key.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
<title>Simple map frame</title>

<style type="text/css">

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

#contentContainer{
    overflow:none;
    height:100%;
    width:100%;
}

#header {
	background-color: #09C;
	clear: both;
	height: 40px;
	position: absolute;
	top: 0px;
	width: 100%;
}

#bodyContainer{
	/* [disabled]height: 100%; */
	width: 100%;
	position: absolute;
	top: 40px;
	bottom: 20px;
}


#leftContainer{
	width: 250px;
	background-color: #EFEFEF;
	height: 100%;
	float: left;
	/* [disabled]overflow: scroll; */
	/* [disabled]overflow-style: auto; */
	/* [disabled]z-index: 10; */
	position: absolute;
	top: 0px;
	/* [disabled]overflow-x: hidden; */
}

#leftPane{
	width: 240px;
	top: 10px;
	background-color: #FFF;
	left: 5px;
	right: 5px;
	bottom: 5px;
	position: absolute;
}



#mapContainer{
	height: 100%;
	background-color: #FFCC00;
	/* [disabled]overflow: scroll; */
	/* [disabled]overflow-style: auto; */
	position: relative;
	left: 250px;
	/* [disabled]padding-left: 250px; */
	/* [disabled]overflow-x: hidden; */
}


#map_canvas{
	height: 100%;
	width: 100%;
}


#footer {
	background-color: #09C;
	clear: both;
	height: 20px;
	position: absolute;
	bottom: 0px;
	width: 100%;
	float: left;
}

</style>
  <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=&sensor=true">
    </script>
	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
	
	
	
	
    <script>

var map;

function initialize() {
  var mapOptions = {
    zoom: 5,
    center: new google.maps.LatLng(24.886436490787712, -70.2685546875),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };


  map = new google.maps.Map(document.getElementById('map_canvas'),
      mapOptions);  
}
google.maps.event.addDomListener(window, 'load', initialize);



</script>


</head>
<body>

<div id="contentContainer" >
    <div id="header">The Header
    </div><!--End Header-->
    
    <div id="bodyContainer">
        <div id="leftContainer" >
            <div id="leftPane" >
               Some stuff</a>. 
            </div><!--End leftPane-->
        </div><!--End leftContainer-->
        <div id="mapContainer">
            <div id="map_canvas">Map here
            </div><!--End map_canvas-->
        </div> <!--End mapContainer-->
    </div> 
    <!--End BodyContainer-->
    
    <div id="footer">The footer!
    </div> <!--End Footer-->
</div> <!--contentContainer-->




</body>
</html>

Open in new window

lvmllcAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
In #mapContainer {} change
left:250px

to
margin-left:250px
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
lvmllcAuthor Commented:
Thanks -
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.