Как избежать наложения текста и карт в css?

Question

Я работаю над сайтом, на котором я создал карту, которая рассчитывает расстояние от текущего местоположения.Карты работают нормально.Теперь я хочу добавить текст внизу, но по некоторым причинам он перекрывается с картами.

Скрипка для этого http://jsfiddle.net/b0zcw415/4/embedded/result

Постановка задачи:

Мне интересно, какие изменения янеобходимо сделать в коде CSS любой текст, который я добавляю под карту, не должен перекрываться.

HTML-код, который я использовал для создания карт:

<div id="outer">

    <p id="distance_text"></p>

    <input type="text" name="location" value="Current Location">

    <br>

    <div id="map_div"></div>

</div>

Answer 1

Проблема связана с тем, что ваш CSS говорит тексту сидеть на 50 пикселей сверху элемента #outer.

Измените следующую строку в вашем селекторе CSS #outer:

#outer {
    width: 400px;
    /* height: 50px; */
    margin: 0 auto;
    text-align: center;
}