How to center a Datamaps world map in two divs

Question

I am trying to center the world map in a full width and full height div but it keeps overflowing out of the div (view fiddle: http://jsbin.com/bifugahapa/edit?html,output)

Here is the code I am using to center the one div within another div to sort of draw it on a smaller div so even if it does overflow it won't produce scroll bars:

<div id="container1" style="
                           position: relative; 
                           width: 100%; 
                           height:95%; 
                           background-color: darkblue; 
                           padding-top: 40px">
     <div id="datamap" style="
        display: table-cell;
        vertical-align: middle;
        margin: 0 auto;
        max-height: 500px;
        height: 95%;
        width: 95%;
        background-color: black
        ">
     </div>
</div>

Is there any way to scale the world map or center the inner div?

Answer 1

If I understand it correctly, you can change your display:table-cell to display: block instead.

  #data-map {
    display: block;
    vertical-align: middle;
    margin: 0 auto;
    max-height: 500px;
    height: 95%;
    width: 95%;
    background-color: black
  }

Update:

To center it also vertically you can use position: absolute

e.g.

  #data-map {
    display: block;
    vertical-align: middle;
    margin: 0 auto;
    background-color: black;
    position: absolute;
    top: 5%;
    bottom: 5%;
    left: 5%;
    right: 5%;
  }

Working sample

Update:

Setting height 100% needs your parent container a set height since you are using % but in that case the body you didn't set any height. So to fix that set height: 100% to html and body elements.

html, body { height: 100% }

Working code