title: Google map div within an element not working
body: <p>I am using a google map and have it structured in side an element like this.</p>
  <pre><code>&lt;main id=&quot;panel&quot; class=&quot;panel&quot;&gt;
     &lt;div class=&quot;topBar&quot;&gt;&lt;/div&gt;  
     &lt;div id=&quot;map&quot;&gt;&lt;/div&gt;
  &lt;/main&gt;
  </code></pre>
  <p>Now if i remove the element main the map displays perfectly, but as soon as i add the element it disapears.</p>
  <p>This is the CSS</p>
  <pre><code>#map {
      height: 100%;
  }
  </code></pre>
  <p>I have tried to re write the css thinking that the structure of the css is the problem, but whatever i try doesn't work. for example</p>
  <pre><code>main map {}
  </code></pre>
  <p><a href="http://1711.co.uk/proximity.html" rel="nofollow noreferrer">Here Is A  Link</a></p>