Search code examples
htmlcsspositionmaps

How to avoid text and maps overlapping in css?

I am working on a website in which I have created a map which calculate the distance from the current location. The maps is working fine. Now I want to add a text beneath but for some reasons it is getting overlap with the maps.

The fiddle for that is http://jsfiddle.net/b0zcw415/4/embedded/result


Problem Statement:

I am wondering what changes I need to make in the css code whatever text I add beneath the map should not be overlapped.

The HTML code which I have used in order to create the maps is:

<div id="outer">

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

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

    <br>

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

</div>
Solution

  • The issue is due to your CSS telling the text to sit 50px from the top of the element #outer.

    Change the following line in your CSS selector #outer:

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