title: How I can fix a simple html UI resolution for different different screen sizes
body: <p>I am new in html development. I design a form designer that is showing good my desktop screen which have size 1366 x 768 approx. But when I put it on another machine on different resolution my UI effected badly. When I zooming in and zooming out then that will also effected. So that is my problem.</p>
  
  <p>I sharing my css and html code , please see it . there have a body which contains a div , that div have some child div like element div , properties div and a resizeable div (that have big problem when resizing) .Please see my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;style&gt;
  .element-div {
   width:300px;
   box-shadow: 1px 1px 1px 1px grey;
   height:auto;
   border-radius: 10px;
   margin-left:20px;
   background-color:#fff;
   float:left;
   padding-bottom:18px;
  }
  
  .test {
   margin-top:5px;
   margin-left : 40px;
   width: 180px;
   height: auto;
   padding:15px;
   margin-bottom: 5px;
   border: 1px solid burlywood;
  }
  
  #drop {
   width: 700px;
   height: 650px;
   margin-bottom: 30px;
   border-radius: 10px;
   background-color: #fff;
   box-shadow: 1px 1px 2px 2px grey;
  }
  
  .dropped {
   width: 180px;
   height: auto;
   padding:15px;
   border : 1px solid burlywood;
   background-color: none;
  }
  
  .button-clone {
   background-color: coral;
   border: solid 1px;
   border-color: crimson;
   height:50px;
   width:100%;
  }
  
  .text-clone {
   border : solid 1px;
   border-color :cornflowerblue;
   height : 25px;
   width : 100%;
  }
  
  .dropdown-clone {
   height : 30px;
   width : 100%;
   background-color: cornflowerblue;
  }
  
  .date {
   border : solid 1px ;
   border-color: darkgoldenrod;
   height:25px;
   width:100%;
  }
  
  .save-form {
   background-color:#B35050;
   border: solid 1px;
   border-color:#861F03;
   height:40px;
   width:80px;
   float : right;
   border-radius : 5px; 
  }
  
  h1 {
   font-family: sans-serif;
   color :brown;
  }
  
  #properties-ui {
   float:right;
   margin-top:15px;
   margin-right:10px;
   min-width:180px;
   min-height:100px;
   background-color: #AFE1E6;
   padding-left:20px;
   padding-right: 20px;
   padding-bottom: 20px;
   border-radius: 10px;
   font-family: sans-serif;
   box-shadow: 1px 1px 1px 1px grey;
  }
  
  #header-properties {
   background-color: brown;
   color:#fff;
   font-family: sans-serif;
   margin-top: -33px;
   text-align:center;
   border-radius: 5px;
   box-shadow: 1px 1px 1px 1px grey;
  }
  
  #delete , #clear, #save{
   background-color:#FF7C7C;
   border: solid 1px;
   border-color:#ff000a;
   color : #fff;
   height:40px;
   width:80px;
   font-family: sans-serif;
   border-radius : 5px; 
  }
  
  #SET {
   background-color:#3D7007;
   color:#fff;
   width:45px;
   height:30px;
   margin-top:5px;
   float:right;
   border:1px solid white;
   border-radius:6px;;
  }
  
  .pre-button {
   background-color:#496EF3;
   color:#fff;
   width:55px;
   height:25px;
   float:right;
   border:1px solid white;
   border-radius:6px;;
  }
  
  &lt;/style&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body style="background-color:ivory;"&gt;
         
          &lt;div style="border:7px solid cadetblue;padding:10px;border-radius:20px;"&gt;
              &lt;div&gt;
                  &lt;h1&gt;FORM TEST&lt;input type="submit" class="save-form" name="saveForm" id="saveForm" value="Submit" style="float:right;color:#fff;" onclick="formsubmit();"&gt;&lt;/h1&gt;  
             
              &lt;/div&gt;
             
              &lt;div style="margin-left:50px;margin-bottom:10px;"&gt;
                &lt;input type="button" style="background-color:#77B337;border:1px #4E9205;"id="save" name="save" value="Save"/&gt;
                  &lt;input type="button" style="background-color:#7C9AFF;border:1px #637ED8;" id="clear" name="clear" value="Clear" onclick="clearCanvas();" /&gt;
                  &lt;input type="button" id="delete" name="delete" value="Delete" onclick="delete_Element();"/&gt;
                  &lt;label style="margin-left:15%;"&gt;Selected Table:&lt;input type="text" name="tablename" id="tablename" class="text-clone" style="border-color:green;width:15%;margin-left:2%; " readonly /&gt;&lt;/label&gt;
              &lt;/div&gt;
              &lt;div id="properties-ui"&gt;
                  &lt;div id="header-properties"&gt;&lt;p&gt;Properties&lt;/p&gt;&lt;/div&gt;
                    &lt;input type="text" id="Name" style="margin-bottom:8px;padding:3px;" placeholder="Name"&gt;&lt;br&gt;
                  &lt;input type="checkbox" id="fieldbox" style="height:15px;width:15px;" name="fieldRequired" /&gt; 
                  &lt;label style="font-size:14px;"&gt;Field Required&lt;/label&gt;&lt;br&gt;&lt;br&gt;
                  &lt;input type="text" id="Value" style="margin-bottom:8px;padding:3px;" placeholder="Value"&gt;&lt;br&gt;
                  &lt;input type="color" name="colorpicker" id="bg" style="margin-top:5px;width:20px;" value="#fefefe"&gt;
                  &lt;label style="font-size:14px;"&gt;Select Color&lt;/label&gt;&lt;br&gt;&lt;br&gt;
                  &lt;input type="text" id="addoption" name="addoption" style="margin-bottom:8px;padding:3px;width:100px;" placeholder="Add Options"&gt;
                  &lt;input type="button" class="pre-button" name="add" id="add" value="Add" onclick="return addoptions();" /&gt;&lt;br&gt;&lt;br&gt;
                  &lt;input type="text" id="deloption" name="deloption" style="margin-bottom:8px;padding:3px;width:100px;" placeholder="Del Options"&gt;
                  &lt;input type="button" class="pre-button" name="Del" id="Del" value="Del"  style="background-color:#F95050" onclick="return deloptions();" /&gt;&lt;br&gt;&lt;br&gt;
                  &lt;select id="data-column" class="dropdown-clone" style="background-color:rgb(208, 110, 6);margin-bottom:15px;height:25px;color:cornsilk" name="Name"&gt;&lt;option value=""&gt;Name&lt;/option&gt;&lt;option value="satinder"&gt;Satinder&lt;/option&gt;&lt;/select&gt;&lt;br&gt;
                  &lt;input type="button" name="setproperties" id="SET" value="SET" onclick="return setProperties();"/&gt;
              &lt;/div&gt;
              
              
            
         &lt;div class="element-div"&gt; 
             &lt;h3 style="margin-left:25px;margin-top:10px;color:goldenrod;"&gt;ELEMENTS&lt;/h3&gt;
             &lt;div class="test red square" style="cursor:move;"&gt;&lt;input type="text" class="text-clone" name="default" style="cursor:not-allowed"&gt;&lt;/div&gt;
             &lt;div class="test red square" style="cursor:move;"&gt;&lt;textarea class="text-clone" name="default" style="cursor:not-allowed" placeholder=" Label here..."&gt;&lt;/textarea&gt;&lt;/div&gt;
             &lt;div class="test red square" style="cursor:move;"&gt;&lt;input type="text"  class="date" name="date"  style="cursor:not-allowed" id="date" placeholder="&amp;nbsp;&amp;nbsp;DD-MM-YEAR"&gt;&lt;/div&gt;
             &lt;div class="test red square" style="cursor:move;"&gt;&lt;select id="selectbox"  class="dropdown-clone"  style="cursor:not-allowed" name="1"&gt;
                          &lt;option id="SELECT" value=""&gt;SELECT&lt;/option&gt;
                          
                          &lt;/select&gt;&lt;/div&gt;
             &lt;div class="test red square" style="cursor:move;" &gt;&lt;input type="button" class="button-clone" value="Button" style="height:50px;cursor:not-allowed;" &gt;&lt;/div&gt;
             &lt;label style="margin-left : 15%;"&gt;Radio Button&lt;/label&gt;
             &lt;div class="test red square" style="cursor:move;"&gt;&lt;input type="radio" style="width:15px; height:15px;cursor:not-allowed;" name="radiobutton" value="default"&gt;&lt;/div&gt;
             &lt;label style="margin-left : 15%;"&gt;Checkbox&lt;/label&gt;
             &lt;div class="test red square" style="cursor:move;"&gt;&lt;input type="checkbox" style="width:15px; height:15px;cursor:not-allowed;"&gt;&lt;/div&gt;
             &lt;label style="margin-left : 15%;"&gt;Combobox&lt;/label&gt;
             &lt;div class="test red square" id="combobox" style="cursor:move;"&gt;&lt;input type="text" name="example"  style="cursor:not-allowed" list="exampleList"&gt;
      &lt;datalist id="exampleList"&gt;
      &lt;/datalist&gt;&lt;/div&gt;
          &lt;/div&gt;  
          
              
              &lt;div id="dd"&gt;&lt;div style="margin-left:26%;resize: both;overflow:auto;" id="drop"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>