I'm new to web design and need some help. I'm trying to display a search box on a webpage. It looks fine at 100% resolution, but when I increase the screen resolution, it moves and the content gets out of place. Here is the original image of my search box:
and this is after zooming in using ctrl+ + :
1: https://i.sstatic.net/KrexC.pngenter code here
This is the code for my search box:
<!--start SearchBox section-->
<center>
<section id="searchbox" style="background:white">
<div class="container" style="margin-top:0px;">
<div class="row">
<div class="col-lg-12">
<form >
<center>
<div id="SearchBoxBorder" style="background:white;border:none;border-radius:5px;margin-top:20px;width:800px;">
<table id="mytable" >
<td style="width:300px;background:white;">
<center> <div class="form-group">
<input type="text" class="form-control" id="searchtopicTxt" placeholder="I am looking for">
</div></center>
</td>
<td style="width:50px;text-align:right;background:white;"> <center><strong>in</strong></center> </td>
<td style="width:400px;background:white;">
<center>
<div class="input-group" style="position:relative;">
<input type="text" class="form-control" placeholder="this locality" id="searchLocalityTxt">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
id="dropdownBtn">Select<span class="caret"></span></button>
<div class="SearchCities" id="dialog" title="Basic dialog">
<div id="outer_div" style="">
...
And here is the CSS for the search box:
table#mytable
{
width:100%;
}
strong { font-size:28px; margin:0px 20px 0 0px; height:30px; line-height:30px; color:#333333; }
.SearchCities {
position:absolute;
margin-top:1px;
top:100%;
right:134px;
z-index:1;
}
#dropdownBtn{
background:white;border-top-width:5px;border-right-width:5px;border-bottom-width:5px;border-left-width:1px;border-color:#eee;height:42px;border-radius:0px;text-align:center;color:black; margin-right:20px;margin-top:2px;
}
...
I've noticed that the output differs when I view the same page in Mozilla and Chrome. I want it to be responsive to any resolution without varying outputs across browsers. Any suggestions or solutions would be appreciated. Thank you in advance.