CODEWITHSUNDEEP
htmlcss
user575219
user575219

Reputation: 2440

CSS adjust width of three fields on a form

Please suggest on making these div's aligned. First Name and last name on one line. Adjusting the width of all these 3 fields 

     <form id="form1" runat="server">
       <div class="Userbox">           
       <div class="UserNameDiv">
        <strong>Username</strong>
       <asp:TextBox ID="UserName" runat="server" MaxLength="50"></asp:TextBox>
     </div>
      <div class="UserNameDiv" > 
        <strong>First Name</strong>
        <asp:TextBox ID="FirstName" runat="server"></asp:TextBox>
        <strong>Last Name</strong>
       <asp:TextBox ID="LastName" runat="server"></asp:TextBox>     
   </div>
     <div  id="EmailAddress">
      <strong>Email</strong>
      <asp:TextBox ID="Email" runat="server"></asp:TextBox>
     </div>

             </div>
        </form>

CSS

.Userbox
{

    width:50%;
    height:100%;
    border:1px solid #0BA84D;
    padding:10px;
    border-radius: 15px;
    margin-left:10%;
    align-self:center;
}

label.firstname {
  width: 150px;
  margin-right: 5px;
  }
 label.lastname {
  width: 150px;
  }
.EmailAddress {
    float:left;
}
#UserNameDiv {
    float:left;
}

enter image description here

Upvotes: 1

Views: 71

Answers (1)

Praveen
Praveen

Reputation: 56509

For a good format, I prefer to use tabular structure like this 

<form id="form1" runat="server">
    <table>
        <tr>
        <td>Username</td>
        <td>
            <input type='text' />
        </td>
        </tr>
        <tr>
            <td>First Name</td>
            <td>
                <input type='text' />
            </td>
            <td>Last Name</td>
            <td>
                <input type='text' />
            </td>
        </tr>
         <tr>
        <td>Email</td>
        <td>
            <input type='text' />
        </td>
        </tr>
    </table>
</form>

enter image description here

Check this JSFiddle

Hope you got an idea to do this in ASP.

Upvotes: 2

Related Questions