I'm currently working on a website where I've implemented a map that calculates the distance from the current location. The map is functioning properly, but now I'm trying to add text below it and running into an issue with overlap.
To see what I mean, you can check out the fiddle here: http://jsfiddle.net/b0zcw415/4/embedded/result
The Challenge:
I'm unsure of how to adjust the CSS so that any text I add beneath the map won't overlap with it. Below is the HTML code snippet used to create the map:
<div id="outer">
<p id="distance_text"></p>
<input type="text" name="location" value="Current Location">
<br>
<div id="map_div"></div>
</div>