Hi

Following are my php and Jquery scripts. The contents of external php files are loading outside the box (shown in pic). I want the contents to load right below the tabs. Could anyone hint me the solution please... 

Please give a look to it :
 
html script

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>title</title>
<link rel  = "stylesheet" type="text/css" href = "style.css">
<link rel="stylesheet" type="text/css" href="jquery-ui.css" >
</head>
<body>

<div id = "top_menu">
<ul>
<li><a href = "Mumbai.php">Mumbai</a></li>
<li><a href = "Banglore.php">Banglore</a></li>
<li><a href = "india.php">India</a></li>
<li><a href = "Delhi.php">Delhi</a></li>
<li><a href = "Chandigarh.php">Chandigarh</a></li>
<li><a href = "Kerela.php">Kerela</a></li>
</ul>

</div>


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="input.js"></script>


</body>
</html>

//////
Jquery script:

$('#top_menu').tabs({
ajaxOptions: {
error: function(xhr, index, status, anchor)
{
$(anchor.hash).text('Could not load page.')
}
} });
/images/forum/upload/2015-06-17/0de1f837e2617e97554cbeee739277dd.JPG