title: positioning a mapbox/leaflet map inside a container div
body: <p>I am working with Mapbox in a Ruby on Rails app. For the life of me, I cannot get the map to adhere to any simple CSS. The only CSS that allows the map to appear is giving it an absolute position with a top and bottom of 0. Altering anything other than the height and width causes the map to disappear.  I want to have the map centered inside a container div.  Here is the code:</p>
  
  <pre><code>&lt;div id="map-container"&gt;
    &lt;div id='map'&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  
  L.mapbox.accessToken = 'pk.eyJ1IjoiYWxvb2thdG9tbW9yb3ciLCJhIjoiNGM4ODhkZjUwMGM1ZDE4M2VjNzQ4MmQ4ODcxMjk5ZjMifQ.XVvFc8kl-0z4NAblE-mNqw';
  var map = L.mapbox.map('map', 'mapbox.streets').setView([40, -74.50], 10);
  
  &lt;/script&gt;
  </code></pre>
  
  <p>And the following CSS:</p>
  
  <pre><code>#map {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 50%;
    width: 50%;
  }
  </code></pre>
  
  <p>If I change anything, the map disappears.  I have tried to give the map-container div a position of relative.  That does not work.  All I want is for the map to be contained within a div, it doesn't seem like it should be difficult.  There is one post about this from 2013 but it is outdated.  Thanks for your help.</p>