title: align textbox and label and buttons in div
body: <p>i am trying to do something like this : </p>
  
  <p><img src="https://i.stack.imgur.com/4Ir0T.png" alt="enter image description here"></p>
  
  <p><strong>but what i get is like this :</strong>, </p>
  
  <p><img src="https://i.stack.imgur.com/FUWBR.png" alt="enter image description here"></p>
  
  <p>i am not able to understand how to do changes in my html , i want to place buttons are correct places and dropdown also with align to other textbox</p>
  
  <pre><code>stylesheet i wrote is like this :
  &lt;style type="text/css"&gt;
          div.label-wrapper {
              position: relative;
              min-width: 300px;
              max-width: 400px;
              height: 24px;
              display: block;
          }
  
              div.label-wrapper &gt; label {
                  position: absolute;
                  left: 0;
                  width: 100px;
                  text-align: left; /* not absolutely necessary, but will be if you assign a width to the label */
                  white-space: nowrap; /* Again, not totally necessary, but if you run out of space otherwise you'll get multiple lines for your label */
              }
  
              div.label-wrapper &gt; input[type=text] {
                  position: absolute;
                  left: 115px; /* Leaves a 15px gap between end of label and start of textbox.  Increase value if you want more than 15px or decrease if you want less */
              }
              div.label-wrapper &gt; input[type=submit] {
                  position: absolute;
                  left: 115px; /* Leaves a 15px gap between end of label and start of textbox.  Increase value if you want more than 15px or decrease if you want less */
              }
      &lt;/style&gt;
  </code></pre>
  
  <p><strong>and html is</strong></p>
  
  <pre><code>&lt;div&gt;
                          &lt;div class='label-wrapper'&gt;
                              &lt;asp:Label ID="Label1" runat="server" Text="Staff ID :"&gt;&lt;/asp:Label&gt;
                              &lt;asp:TextBox ID="staffID" runat="server" Width="150px"&gt;&lt;/asp:TextBox&gt;
                          &lt;/div&gt;
                          &lt;div class='label-wrapper'&gt;
                                      &lt;asp:Label ID="Label2" runat="server" Text="Name :"&gt;&lt;/asp:Label&gt;
                                      &lt;asp:TextBox ID="staffname" runat="server" Width="300px"&gt;&lt;/asp:TextBox&gt;
                          &lt;/div&gt;
                          &lt;div class='label-wrapper'&gt;
                                      &lt;asp:Label ID="Label3" runat="server" Text="Surname :"&gt;&lt;/asp:Label&gt;
                                      &lt;asp:TextBox ID="StaffSurname" runat="server" Width="300px"&gt;&lt;/asp:TextBox&gt;
                          &lt;/div&gt;
                          &lt;div class='label-wrapper'&gt;
                                      &lt;asp:Label ID="Label5" runat="server" Text="Email Address :"&gt;&lt;/asp:Label&gt;
                                      &lt;asp:TextBox ID="email" runat="server" Width="423px"&gt;&lt;/asp:TextBox&gt;
                          &lt;/div&gt;
                          &lt;div class='label-wrapper'&gt;
                                      &lt;asp:Label ID="Label4" runat="server" Text="Research Areas of Expertise :"&gt;&lt;/asp:Label&gt;
                                      &lt;asp:CheckBoxList ID="ResearchAreasList" runat="server" RepeatLayout="Flow" Width="230px"&gt;
                                          &lt;asp:ListItem&gt;Information Systems&lt;/asp:ListItem&gt;
                                          &lt;asp:ListItem&gt;User Interfaces&lt;/asp:ListItem&gt;
                                          &lt;asp:ListItem&gt;Problem Solving&lt;/asp:ListItem&gt;
                                          &lt;asp:ListItem&gt;3D Graphics&lt;/asp:ListItem&gt;
                                          &lt;asp:ListItem&gt;Computing Education&lt;/asp:ListItem&gt;
                                          &lt;asp:ListItem&gt;Mobile Computing&lt;/asp:ListItem&gt;
                                      &lt;/asp:CheckBoxList&gt;
                          &lt;/div&gt;
                          &lt;div class='label-wrapper'&gt;
                              &lt;p&gt;
                                      &lt;span class="art-button-wrapper"&gt;
                                              &lt;span class="art-button-l"&gt;&lt;/span&gt;
                                              &lt;span class="art-button-r"&gt;&lt;/span&gt;
                                              &lt;asp:Button ID="Button1" runat="server" CssClass="art-button" Text="Save" OnClick="Button1_Click" /&gt;
                                          &lt;/span&gt;
                                  &lt;/p&gt;
                              &lt;p&gt;
                                      &lt;span class="art-button-wrapper"&gt;
                                              &lt;span class="art-button-l"&gt;&lt;/span&gt;
                                              &lt;span class="art-button-r"&gt;&lt;/span&gt;
                                              &lt;asp:Button ID="Button2" runat="server" CssClass="art-button" Text="Cancel" /&gt;
                                          &lt;/span&gt;
                                  &lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt; 
  </code></pre>