Search code examples
cssgoogle-maps-api-3sizefluid-layoutvariable-width

google maps API v3 div won't fill space properly 100% width + height

Here is my site. (I have been working on it all morning but there seems to be some issue with my host at the moment so if you cannot connect it should work later).

As you can see the map is too big. I have a sidebar floating on the right of the page with a width of 150px but this is covered up. I also have a footer which I have designed to be 'pushed' to the bottom of the page. Without the map div this works fine and everything is how it should be, but when I create the map div in the remaining space I just can't get it to fill the space properly. If I set width + height to 100% then the sidebar gets covered up and the map extends below my footer by about the height of the footer, which is how it is set now. I have tried setting width and height to 'auto' but this doesn't fix my problem. All it does is constrains the proportions of the div to the min-width and -height that I have set in my code (100x100px). I have already set 'html' and 'body' to 100% and as far as I can tell that is all I should need to do for 'width + height = auto' to work properly.

CSS

@charset "utf-8";
/* CSS Document */
#body {
 height: 100%;
 I have loads of other stuff here but my host isn't working properly at the moment so I can't get to it :S
}
#wrapper    {
 min-width: 100%;
 min-height: 100%;
 margin: 0  auto -150px;
 position: relative;
 overflow-x: hidden;
}

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

#content {
 width: 100%;
 height: 100%;
 padding: 0;
}

#googleMap {
 width: 100%;
 height: 100%;
 min-width: 100px;
 min-height: 100px;
 padding: 0;
 position:absolute;
 top: 86px;
 left: 0;
}

#sidebar    {
 width: 150px;
 height: 100%;
 min-height: 100%;
 float: right;
 text-align: center;
 background-image: url(../images/sidebar.png);
 background-repeat: no-repeat;
 background-color: #8fa642;
 margin: 0;
 padding: 0;
 overflow: hidden;
}

HTML - I have omitted the header etc. for easier reading but this can be obtained using a source-viewer on my site.

<div id="main">
 <div id="content">

  <div id="sidebar">
  Hello<br />
  This will be the sidebar!<br />
  It will be pretty plain til I work out the javascript...<br/>
  <img width="60px" height="60px" /><br/>
  <img width="60px" height="60px" />
  </div><!--sidebar-->

  <div id="googleMap" />
 </div><!--content-->

 <div class="push" />

 <div id="footer" class="footer clear">  
  <div class="image_carousel">
  <!-- Elastislide Carousel -->
   <ul id="carousel" class="elastislide-list">
   <li><a href="https://www.facebook.com/pages/Flagship-Global/135769953251026" target="_blank"><img src="images/slider/flagship.png" height="54px" alt="wwoof" /></a></li>
   <li><a href="http://eebu.earthshipeurope.org/" target="_blank"><img src="images/slider/eebu.png" height="54px" alt="eebu" /></a></li>
   <li><a href="#"><img src="images/small/3.jpg" height="54px" alt="image03" /></a></li>
   <li><a href="#"><img src="images/small/4.jpg" height="54px" alt="image04" /></a></li>
   <li><a href="#"><img src="images/small/5.jpg" height="54px" alt="image05" /></a></li>
   <li><a href="#"><img src="images/small/6.jpg" height="54px" alt="image06" /></a></li>
   <li><a href="#"><img src="images/small/7.jpg" height="54px" alt="image07" /></a></li>
   <li><a href="#"><img src="images/small/8.jpg" height="54px" alt="image08" /></a></li>
   <li><a href="#"><img src="images/small/9.jpg" height="54px" alt="image09" /></a></li>
   <li><a href="#"><img src="images/small/10.jpg" height="54px" alt="image10" /></a></li>
   <li><a href="#"><img src="images/small/11.jpg" height="54px" alt="image11" /></a></li>
   <li><a href="#"><img src="images/small/12.jpg" height="54px" alt="image12" /></a></li>
   <li><a href="#"><img src="images/small/13.jpg" height="54px" alt="image13" /></a></li>
   <li><a href="#"><img src="images/small/14.jpg" height="54px" alt="image14" /></a></li>
   <li><a href="#"><img src="images/small/15.jpg" height="54px" alt="image15" /></a></li>
   <li><a href="#"><img src="images/small/16.jpg" height="54px" alt="image16" /></a></li>
   <li><a href="#"><img src="images/small/17.jpg" height="54px" alt="image17" /></a></li>
   <li><a href="#"><img src="images/small/18.jpg" height="54px" alt="image18" /></a></li>
   <li><a href="#"><img src="images/small/19.jpg" height="54px" alt="image19" /></a></li>
   <li><a href="#"><img src="images/small/20.jpg" height="54px" alt="image20" /></a></li></ul>
   <!-- End Elastislide Carousel-->
   <div class="clear" />
  </div><!--image_carousel-->
  <div id="page_info">
  &#169; Permanet 2013
  </div><!--page info-->
 </div><!--footer-->
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
 <script src="js/jquerypp.custom.js" type="text/javascript"></script>
 <script src="js/jquery.elastislide.js" type="text/javascript"></script>
 <script type="text/javascript">        
 $( '#carousel' ).elastislide();
 </script>
</div><!--main-->
Solution

  • You can adjust the width of your iframe like this:

    #googleMap {
  width: 73% !important;
}

    But what you really need to do it creating two new divs around your google map and around your widget area. Then you will define the width that you want for each of them, example:

    #container_googlemap_Map {
  width: 70%;
}

#widget_area {
  width: 30%;
}