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:

  

  


#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