Div tricks inline the text? - html

Question

I am a beginner, and I'm trying to display a div up to my radio button. I explain the problem inside my code. The autocomplete box displays after the ajax call.
<input type="text" name="search" id="search" autofocus autocomplete="off" />
<input type="submit" id="search_button" title="Check" value="Check"/>
//the suggesstion div move radio button to the right I need it up of the radio buttons !
<div id="suggesstion-box"></div>
<label>Search by :</label>
<input id="radio" name="radio" value="name" type="radio"/>
<span id="radio_text"> name</span>
<input id="radio" name="radio" value="age" type="radio">
<span id="radio_text"/>age</span>
ajax.js to fetch data
$(document).ready(function(){
$("#search").keyup(function(){
if ($("#search").val() == "")
$("#suggesstion-box").hide();
else{
$.ajax({
type: "GET",
url: "getinfo.php",
data:'keyword='+$(this).val(),
success: function(data){
console.log(data);
$("#suggesstion-box").show();
document.getElementById("suggesstion-box").innerHTML=data;
//$("#suggesstion-box").html("data");
$("#search").css("background","#FFF");
}
});
}//else box not empty
});
console.log("print it");
});
function select(val) {
$("#search").val(val);
$("#suggesstion-box").hide();
}
getinfo.php to print data to suggestion box
<?php
require_once("dbcontroller.php");
$db_handle = new DBController();
//include('database.php');
//Sanitize the POST values
$hint = $_GET['keyword'];
$i = 0;
$qry1 = "SELECT * FROM Journals where Journal_name like '" . $hint . "%' AND is_reported=1 LIMIT 3 ";
$qry2 = "SELECT * FROM Publishers where Publisher_Name like '" . $hint . "%' AND is_reported=1 LIMIT 2;";
//$result = mysql_query($qry1);
//$result2 = mysql_query($qry2);
$data = array();
$result2 = $db_handle->runQuery($qry2);
$result1 = $db_handle->runQuery($qry1);
if (!empty($result2)) {
?>
<ul id="country-list">
<?php
foreach ($result2 as $info2) {
?>
<li onClick="select('<?php echo $info2['Publisher_Name']; ?>');"><?php echo $info2['Publisher_Name']; ?></li>
<?php
} if (empty($result1)){
?>
</ul>
<?php } }
if (!empty($result1)) {
if (empty($result2)){
?>
<ul id="country-list">
<?php
}
foreach ($result1 as $info) {
?>
<li onClick="select('<?php echo $info['Journal_name']; ?>');"><?php echo $info['Journal_name']; ?></li>
<?php } ?>
</ul>
<?php
}
?>
s.css
#country-list{float:left;list-style:none;margin:0;padding:0;width:210px; display: inline;}
#country-list li{padding: 10px; background:#FAFAFA;border-bottom:#F0F0F0 1px solid;}
#country-list li:hover{background:#F0F0F0;}
#search {
width: 300px;
height: 10px;
border: thin solid #00B6A8;
margin-top: 10px;
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
border-collapse: collapse;
-webkit-box-shadow: 0px 0px 2px;
box-shadow: 0px 0px 2px;
padding: 10px;
display: inline;
//border: #F0F0F0 1px solid;
}
#suggesstion-box {
display: inline;
}
#radio {
margin-top: 10px;
margin-left: 30px;
}
#radio_text {
color: #545454;
font-size: normal;
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
font-style: normal;
font-weight: normal;
}
#label {
/*margin-left: -210px;*/
color: #00B6A8;
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
font-weight: normal;
font-size: medium;
}

Answer 1

Try:
<div id="suggesstion-box"></div>
<div class="wrapper">
<label>Search by :</label>
<input id="radio" name="radio" value="name" type="radio"/>
<span id="radio_text"> name</span>
<input id="radio" name="radio" value="age" type="radio">
<span id="radio_text"/>age</span>
</div>
In the css:
.wrapper {
position: absolute;
}