Website does not display properly - html

Question

Hello, at the moment I am facing 2 problems with my website:
The fact that when I scroll down the text pops over the other topbar
The fact that I have 3 radio buttons and one of them is constantly selected, and I want for the user to able to select one of them at a time
This is the website http://www.onetechsearch.com/
<style type="text/css">
#picture-side {
display: block;
float:left;
z-index: 10;
top: 10px;
left: 10px;
}
input[type="radio"]:checked+label{ border-bottom: 5px solid lime; }
#picture-side1 {
display: block;
float:left;
z-index: 10;
top: 10px;
left: 10px;
}
.site-wrap {
display: none;
}
#picture-side2 {
display: block;
float:left;
z-index: 10;
top: 10px;
left: 10px;
}
#picture2 {
visibility: hidden;
}
#video {
visibility: hidden;
}
#picture {
visibility: hidden;
}
</style>
<script src="jquery-1.8.0.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var cat= ["Australia", "Bangladesh", "Denmark", "Hong Kong", "Indonesia", "Netherlands", "New Zealand", "South Africa", "C"];
$("#cat").select2({
data: cat
});
});
</script>
<div id="topbar">
<div class="width-container">
<h1><?php bloginfo('name'); ?></h1>
<div id="search">
<form action="<?php bloginfo('url');?>/recipes" method="GET" id="searchF">
<?php
$searched_term = get_query_var('recipe_search');
if (empty($searched_term)) {
$searched_term = isset($_GET["search"]) ? $_GET["search"] : "";
}
?>
<input id="sfield" type="text" name="search" placeholder="keywords" <?php if (!empty($searched_term)) {echo 'value="'.$searched_term.'"';} ?>>
<input type="submit" value="Search">
<div id="picture-side">
<input type="radio" name="images" value="1" id="picture"
<?php if(isset($_GET["images"]) && $_GET["images"]=='1'){ echo 'Checked';} ?>><label for="picture">With Pictures</label>
</div>
<div id="picture-side1">
<input type="radio" name="images" value="0" id="picture2"
<?php if(isset($_GET["images"]) && $_GET["images"]=='0'){ echo 'checked';} ?>><label for="picture2">Without Pictures</label>
</div>
<div id="picture-side2">
<input type="radio" name="video" value="0" id="video"
<?php if(isset($_GET["video"]) && $_GET["video"]=='0'){ echo 'checked';} ?>><label for="video">With video</label>
</div>
<div id="time-side">
<!--<small>Published time</small>-->
<input type="text" id="from-side" name="from" placeholder="Start date"
</div>
<select id="cat" name="cat">
<option value="all" selected>All categories</option>
<option value="HI">Hawaii</option>
<option value="C">Hawaji</option>
</select>
</div>
</div>
</form>
</div>
</div>

Answer 1

Your topbar's z-index is set to 999, "smtitle" also has the same z-index the only thing you need to do is to set "smtitle" z-index to 998 or lower if possible.

Answer 2

The link you provided has the 'images' GET variable set and it's set to empty which in php means 0. This makes your check $_GET["images"]=='0' to validate as TRUE.

Answer 3

Your Radio buttons must have the same name value to work as a group
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_radio