How can I put another text box in the same row as my other text box?

Question

I managed to make my zip textbox aligned with my delivery text box. This is the code.

<div class="form-group" style="float:left">
                                    <asp:TextBox ID="txtAddress" runat="server" Width="227px" Height="81px"
                                        name="form-first-name" placeholder="Delivery Address..." class="form-first-name form-control" Text-Mode="MultiLine"></asp:TextBox>
                                    <asp:RequiredFieldValidator ID="RequiredFieldValidator7" runat="server" 
                                        ErrorMessage="Delivery Address is required." Display="Dynamic" ControlToValidate="txtAddress" 
                                        ForeColor="Red"></asp:RequiredFieldValidator>
                                    <asp:RegularExpressionValidator ID="RegularExpressionValidator10" runat="server" 
                                        ErrorMessage="Enter a valid Address" Display="Dynamic" ControlToValidate="txtAddress" 
                                        ForeColor="Red" 
                                        ValidationExpression="^[a-zA-Z# .0-9]+$"></asp:RegularExpressionValidator>
                                </div>

But it has no space between the 2 textboxes? How can I do the trick?

Answer 1

You can add a "float: left" property to your two textboxes. It makes it align on same line and use css for doing the styling.

Example code is shown below. Just add an id for two divs and give some unique id.

HTML

ABC<br />
<div id="textbox1"></div>
<div id="textbox2"></div>

CSS

#textbox1, #textbox2 {
    display: block;
    float: left;    
    width: 100px;    
    height: 100px;    
}

#textbox1 {
    background-color: red;
}

#textbox2 {
    background-color: blue;
}

See JSFIDDLE

Answer 2

If you want to use server side text box, then just put both textbox together. Remove class from text box and just place both textbox with each other. let me know if you have any query.

Answer 3

So if you already got them side by side, you can add some margin-left (or padding-left) to the CSS on the right box. You could add margin-right (or padding-right) to the left box CSS.

Answer 4

simply create a table with 3 columns + one row and put your textboxes inside seperately.

Here;

      <table>
            <tr>
                <td><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
                <td style="width: 3px">&nbsp;</td>
                <td><asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></td>
            </tr>
        </table>

Answer 5

i added this code on top

<style>
#txtAddress
{
    margin-right:75px;
}

and my 2 textboxes, i added float:left

 <div class="form-group" style="float:left">
                                    <asp:TextBox ID="txtAddress" runat="server" Width="227px" Height="81px" 
                                        name="form-first-name" placeholder="Delivery Address..." class="form-first-name form-control" Text-Mode="MultiLine"></asp:TextBox>
                                    <asp:RequiredFieldValidator ID="RequiredFieldValidator7" runat="server" 
                                        ErrorMessage="Delivery Address is required." Display="Dynamic" ControlToValidate="txtAddress" 
                                        ForeColor="Red"></asp:RequiredFieldValidator>
                                    <asp:RegularExpressionValidator ID="RegularExpressionValidator10" runat="server" 
                                        ErrorMessage="Enter a valid Address" Display="Dynamic" ControlToValidate="txtAddress" 
                                        ForeColor="Red" 
                                        ValidationExpression="^[a-zA-Z# .0-9]+$"></asp:RegularExpressionValidator>
                                </div>
                                <div class="form-group">
                                     <asp:TextBox ID="txtZip" runat="server" name="form-zip-code" MaxLength="4" Width="200" placeholder="Zip Code..." class="form-zip-code form-control"></asp:TextBox>
                                    <asp:RequiredFieldValidator ID="RequiredFieldValidator8" Display="Dynamic" runat="server" 
                                        ErrorMessage="Zip code is required." ControlToValidate="txtZip" ForeColor="Red"></asp:RequiredFieldValidator>
                                    <asp:RegularExpressionValidator ID="RegularExpressionValidator8" runat="server" 
                                        ErrorMessage="Enter a valid zip code" Display="Dynamic" ControlToValidate="txtZip" 
                                        ForeColor="Red" ValidationExpression=^[0-9]*$></asp:RegularExpressionValidator>
                                </div>