Java output is displaying at the bottom of the page

[hotrodjeremy]

<link type="text/css" href="assets/css/main.css" rel="stylesheet" />

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="assets/js/google_maps/jquery-1.9.1.js"></script>
<script type="text/javascript" src="assets/js/google_maps/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript" src="assets/js/google_maps/main.js"></script>
<script>
  
  function updatelocation(){
	var lat =  document.getElementById('latitude').value;
	var long =  document.getElementById('longitude').value;
	newlocation = lat+ "," +long;
	alert(newlocation);
  }  
</script>

	<div class="row">
	  <div class="large-12 small-6 columns">
		<label>Address: </label><input id="address"  type="text"/>
		<div id="map_canvas" style="width:100%; height:300px"></div>
		<br/>
		<label>latitude: </label><input id="latitude" type="text"/><br/>
		<label>longitude: </label><input id="longitude" type="text"/>
		<input name="setlocation" type="button" onClick="javascript:updatelocation()" value="Set As Your Location">
	  </div>
	</div>

Here is my code can some one help me? The display should be right next to the address textbox.

[ricmetal]

#map_canvas wouldn't happen to have a position rule in the css would it?