positioning a mapbox/leaflet map inside a container div

Question

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

Answer 1

Just change the 'position:absolute' to 'position:relative' for both divs:

<div id="map-container">
  <div id="map">
  </div>
</div>

#map-container {
    position: relative;
    height: 180px;
    width: 600px;
}

#map {
    position: relative;
    height: inherit;
    width: inherit;
}

Note: The height and width on the '#map' element will be inherited by the parent div '#map-container', which will be '180px' and '600px' respectively in this case or whatever you set.

DEMO: http://plnkr.co/edit/qjIAiud3aUF11iQPDKj0?p=preview

Answer 2

The only css rule that must be set for Leaflet's (Mapbox is an extended version of Leaflet) element when positioned static/relative is an absolute height:

#map {
    height: 200px;
}

Example: http://plnkr.co/edit/vdeyLv?p=preview

That will work always, doesn't matter how deep the element is nested. When width is not set it will use all the width available. When you want to switch to setting height in percentages, you'll need to make sure that all the anchestor elements of the map element have a height set also:

#html, #body, #map-container {
    height: 100%;
}

#map {
    height: 40%;
}

Example: http://plnkr.co/edit/rAuNC0?p=preview

I guess the reasoning behind using absolute positioning in the Mapbox examples is that one does not have to explain the above because no matter how deep you nest the map's element, it just works.