CODEWITHSUNDEEP
htmlcss
QS Train
QS Train

Reputation: 95

How to get two inputs side by side and the rest on separate lines?

I have an form that I want to have a user fill in. I want to lay it out that the name fields are next to each other and all other fields are on their own separate line.

I have used the below code, have tried putting paragraphs and "brs" , but still no luck...

The code below:

<div style="float:left;">
  <label for="username"><b>First Name*</b><span class="required"></span>    </label>
  <input id="user_first_name" name="FirstName" size="30" type="text"     placeholder="First"  />
</div>

<div style="float:right;">
  <label for="name"><b>Last Name*</b><span class="required"></span></label>
  <input id="user_last_name" name="LastName" size="30" type="text"     placeholder="Last"/>
</div>
<!--<label><b>Full Name </b><span class="required">*</span></label><input     type="text" name="FirstName" class="field-divided" placeholder="First"     style="float:left" />;<input type="text" name="Surname" class="field-divided"     placeholder="Last" style="float:right"/> <p></p>-->
<label><b>Email </b><span class="required">*</span></label><input     type="email" name="Email" class="field-long" placeholder="Email" value="<?php     echo $_POST['Turnover']; ?>" />
<label><b>Phone </b><span class="required">*</span></label><input     type="number" name="Phone" class="field-divided" placeholder="Number" />
<label style="font-size:10px">only numbers, no special characters</label>

Returns the below image: Wrong

So, for some reason the Email Address Label is very much out of place (it should be above the input that is reading 1500 - the way Phone is above number I'm sure that it's a silly little thing, but I just can't place it

I have tried various combinations of "< p>" and "< br >",but to no avail.

Upvotes: 0

Views: 5980

Answers (4)

Edward Snowden
Edward Snowden

Reputation: 155

.flexi{
display:flex;
flex-flow:row;  
}
<div class="flexi">
<div>
  <label for="username"><b>First Name*</b><span class="required"></span>    </label>
  <input id="user_first_name" name="FirstName" size="30" type="text"     placeholder="First"  />
</div>

<div>
  <label for="name"><b>Last Name*</b><span class="required"></span></label>
  <input id="user_last_name" name="LastName" size="30" type="text"     placeholder="Last"/>
</div>
</div>
<div>
<!--<label><b>Full Name </b><span class="required">*</span></label><input     type="text" name="FirstName" class="field-divided" placeholder="First"     style="float:left" />;<input type="text" name="Surname" class="field-divided"     placeholder="Last" style="float:right"/> <p></p>-->

<div>
<label><b>Email </b><span class="required">*</span></label><input     type="email" name="Email" class="field-long" placeholder="Email" value="<?php     echo $_POST['Turnover']; ?>" />

</div>

<div>
<label><b>Phone </b><span class="required">*</span></label><input     type="number" name="Phone" class="field-divided" placeholder="Number" />
<label style="font-size:10px">only numbers, no special characters</label>

</div>
</div>

Read about css and html on internet . Floating causes parent to remove height. thats why yo email pops in mill

https://jsfiddle.net/d69Lxmst/3/

Upvotes: 0

CFSO6459
CFSO6459

Reputation: 95

You need to add "clear both" ( <div style="clear:both"></div> ) to prevent the content below mixed up with your 2 floating divs.

Example code:

<div style="float:left;">
<!-- something here -->
</div>

<div style="float:right;">
<!-- something here -->
</div>

<div style="clear:both"></div>

<!-- more goes here -->

Upvotes: 2

Stan Alachniewicz
Stan Alachniewicz

Reputation: 402

wrap your bottom 3 inputs and labels in a div and add 100% width to each input and label

<div style="width:100%;clear:both;display:block;">

<label style="width:100%;display:block;"></label

<input style="width:100%;display:block;">

</div>

Upvotes: 0

Chris
Chris

Reputation: 59541

I would use something like Bootstrap, if I were you. However, here's a custom solution:

input {
  width: 100%;
  display: block;
}

div.inline {
  width: 100%;
  display: table;
}

div.inline div {
  display: table-cell;
}

div.inline div:nth-child(n+2) {
   padding-left: 10px;
}
<div class="inline">
  <div>
    <label>First Name:</label>
    <input>
  </div>
  <div>
    <label>Last Name:</label>
    <input>
  </div>
</div>
<div>
  <label>Email:</label>
  <input>
</div>
<div>
  <label>Phone:</label>
  <input>
</div>

Upvotes: 0

Related Questions