title: issues in html css design textbox disabled?
body: <p>Hai i develop an application in android phoneGap.I used html css for Designing Purpose and It is working Fine.But when I type in the text box my design is collapsing.I have attached my form.kindly go through it and clear my issues.</p>
  
  <p><img src="https://i.stack.imgur.com/py92i.png" alt="This is Design "></p>
  
  <p>But while I type the text in these text Box,my Form is like this<img src="https://i.stack.imgur.com/jyR0m.png" alt="enter image description here"></p>
  
  <p>In these my another textbox is diabled. How can i recitify this problem?</p>
  
  <p>My code
  <strong>update</strong>
      
      
        
         
          
          PhoneGap
          
          </p>
  
  <pre><code>     &lt;script type="text/javascript"&gt;
  
  
      &lt;/script&gt;
       &lt;style type="text/css"&gt;
       #footer {
      position:absolute; z-index:2;
      top:92%;bottom:32px; left:0;
      width:100%;
      height:18px;
      padding:0;
  }
  input:focus{//update
  outline: none;
   }
  
  .ex21{
  
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      border-color:#FBB917;
  
      border: 1px solid;
    background:url('searchbtn.PNG' ) repeat-y right;
    padding-right:20px;
  
      }
  .ex2{
  
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      border-color:#FBB917;
  
      border: 1px solid;
  
  
      }
      .searchbox input {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  
  margin-top:0.2cm;
  
  margin-left:1cm;
  width:70%;
  height: 32px;
  float: left;
  font-size:15pt;
  padding: 2px;
  border-top: 4px solid orange;
  border-bottom: 4px solid orange;
  border-left: 4px solid orange;
  
  }
  .sea input {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  margin-top:0.2cm;
  
  background-image: url(sea.PNG);
  color: #fff;
  font-weight: bold; 
  
  width:10%; 
  height: 43px;
  border: 0;
  float: left;
  border-top: 4px solid orange;
  border-bottom: 4px solid orange;
  border-right: 4px solid orange;
  }
      .invitebox input {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  
  margin-top:0.2cm;
  
  margin-left:1cm;
  width:70%;
  height: 32px;
  float: left;
  font-size:15pt;
  padding: 2px;
  border-top: 4px solid orange;
  border-bottom: 4px solid orange;
  border-left: 4px solid orange;
  
  }
  .invitebtn input {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  margin-top:0.2cm;
  
  background-image: url(sea.PNG);
  color: #fff;
  font-weight: bold; 
  
  width:10%; 
  height: 43px;
  border: 0;
  float: left;
  border-top: 4px solid orange;
  border-bottom: 4px solid orange;
  border-right: 4px solid orange;
  }
  
  
      &lt;/style&gt;
    &lt;/head&gt;
  
    &lt;body &gt;
  
      &lt;table width="100%"&gt;
          &lt;tr&gt;
               &lt;td&gt; &lt;label style="font-size:12pt"&gt;Search Names&lt;/label&gt;&lt;/td&gt;
  
          &lt;/tr&gt;
      &lt;/table&gt;
  
    &lt;br&gt;  
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
  
  
              &lt;td&gt;&lt;label style="font-size:12pt"&gt;Choose one of the following options to search our directory of Names&lt;/label&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
  
              &lt;td&gt;&lt;/td&gt;
  
          &lt;/tr&gt;
      &lt;/table&gt;
  
      &lt;div align="center"&gt;
      &lt;div class="searchbox"&gt;&lt;input type="text" name="searchbox" id="searchbox"&gt;&lt;/div&gt;
  &lt;div class="sea"&gt;&lt;input name="search" type="button" id="btn"&gt;&lt;/div&gt;
  &lt;/div&gt;
        &lt;br/&gt;
        &lt;br/&gt;
          &lt;br/&gt;
  
        &lt;br/&gt;
          &lt;br/&gt;
        &lt;br/&gt;
       &lt;table&gt;
     &lt;tr&gt;
     &lt;td&gt;&lt;/td&gt;
     &lt;td&gt;&lt;/td&gt;
  
     &lt;td&gt;&lt;/td&gt;
  
     &lt;td&gt;&lt;/td&gt;
     &lt;td&gt;&lt;/td&gt;
     &lt;td&gt;&lt;input value='' type='radio' id='one'/&gt;&lt;label&gt;Limit Search Results to Name&lt;/label&gt;&lt;/td&gt;
  
     &lt;/tr&gt;
     &lt;/table&gt;
     &lt;br&gt;
     &lt;br&gt;
     &lt;div align="center"&gt;
  
              &lt;label style="font:bold;font-size:15pt"&gt;OR&lt;/label&gt;
          &lt;/div&gt;
        &lt;br&gt;
        &lt;div id="loadingScreen" align="center"&gt;&lt;/div&gt;
      &lt;div align="center"&gt;
      &lt;div class="invitebox"&gt;&lt;input type="text" name="invitebox" id="invitebox" &gt;&lt;/div&gt;
  &lt;div class="invitebtn"&gt;&lt;input name="invite" type="button" &gt;&lt;/div&gt;
  &lt;/div&gt;
  
       &lt;div id="footer"&gt;
          &lt;div style="border-width:3px;border-height:6px;background-color:#00458D;" align="center"&gt;
           &lt;table&gt;
  
  
           &lt;input type="button" value="Button1" style="width:20%" /&gt;
           &lt;input type="button" value="Button2" style="width:20%" /&gt;
  
           &lt;input type="button" value="Button3" style="width:20%"/&gt;
           &lt;input type="button" value="Button4" style="width:20%" /&gt;
           &lt;/table&gt;
           &lt;/div&gt;
          &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>