HTML/CSS: How to make the certain input fields on the same line in the form?

Question

I'm working on a hotel reservation webpage, and having trouble aligning the input/select fields. For example, my current code shows the first name and the last name in two different lines, but I want to have them all together. This is my form looks like with my code:

first name
last name
address 1
address 2
city 
state
zip

And below is how I wanted it to be:

first name last name  <<----
address 1
address 2
city state            <<----
zip

From my research I was able to do similarly by using display: inline-block, so I tried using it in my code as below, but it does not change anything. What am I doing wrong here?

#mainContainer {
    width: 1139px;
    display: flex;
    justify-content: center;
    padding: 0;
    margin: auto;
    text-align: center;
}
#formContainer {
    max-width: 1000px;
    width: 100%;
    height: 100%;
    margin-top: 110px;
    background-color: white;
}
#contact {
    padding-top: 25px;
}

#customerInformationForm {
    width:50%;
    float:left;
    margin-bottom: 50px
}
#contact input {
    width: 70%;
    border: 1px solid #ccc;
    background: #FFF;
    margin: 0 0 5px;
    padding: 10px;
}

#contact select {
    width: 70%;
    border: 1px solid #ccc;
    background: #FFF;
    margin: 0 0 5px;
    padding: 10px;
}

#contact input [class="customerFullName"] {
    display: inline-block;
    width: 50%;
}

<div id="mainContainer">
  <div id="formContainer">
      <form id="contact" action="" method="post">
          <div id="customerInformationForm">
            <input class="customerFullName" placeholder="First name" type="text">
            <input class="customerFullName" placeholder="Last name" type="text">
            <input placeholder="Address 1" type="text">
            <input placeholder="Address 2" type="text">
        <input placeholder="City" type="text">
        <select id="state" name="state">
            <option value="State" selected>State</option>
            <option value="Alabama">AL</option>
            <option value="Alaska">AK</option>
            <option value="Arizona">AZ</option>
          </select>
          <input placeholder="ZIP" type="text">
          </div>       
      </form>
  </div>
</div>

Don't rely on Placeholder as a label

Jon P
– Jon P

2020-11-08 23:04:14 +00:00
Commented Nov 8, 2020 at 23:04 — Jon P
– Jon P, Commented Nov 8, 2020 at 23:04

karoljablonski · Accepted Answer · 2020-11-08 23:26:31Z

You made a little mess about all those "width" declarations. You made your div #customerInformationForm "width" for a half of a parent (50% width). Then you inserted in that div your first, last name etc. inputs, and set up their width for 70% of the parent, which actually made no possible, to insert two inputs side by side (70% + 70% equals more than 100%, so it displays in new line). Reconsider using all these width declarations, below you have a little start how you may handle it.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #mainContainer {
    width: 1139px;
    display: flex;
    justify-content: center;
    padding: 0;
    margin: auto;
    text-align: center;
}
#formContainer {
    max-width: 1000px;
    width: 100%;
    height: 100%;
    margin-top: 110px;
    background-color: white;
}
#contact {
    padding-top: 25px;
}

#customerInformationForm {
/*    width:50%;*/
    float:left;
    margin-bottom: 50px;
    background-color: red;
}
#contact input {
    width: 35%;
    border: 1px solid #ccc;
    background: #FFF;
    margin: 0 0 5px;
    padding: 10px;
}
#contact input:nth-child(3),
        #contact input:nth-child(4) {
            width: 70%;
        }

#contact select {
    width: 35%;
    border: 1px solid #ccc;
    background: #FFF;
    margin: 0 0 5px;
    padding: 10px;
}

#contact #customerInformationForm input .customerFullName {
    display: inline-block;
    width: 70%;
}
    </style>
</head>
<body>
    

 <div id="mainContainer">
  <div id="formContainer">
      <form id="contact" action="" method="post">
          <div id="customerInformationForm">
            <input class="customerFullName" placeholder="First name" type="text">
            <input class="customerFullName" placeholder="Last name" type="text">
            <input placeholder="Address 1" type="text">
            <input placeholder="Address 2" type="text">
        <input placeholder="City" type="text">
        <select id="state" name="state">
            <option value="State" selected>State</option>
            <option value="Alabama">AL</option>
            <option value="Alaska">AK</option>
            <option value="Arizona">AZ</option>
          </select>
          <input placeholder="ZIP" type="text">
          </div>       
      </form>
  </div>
</div>
</body>
</html>

Jon P · Accepted Answer · 2020-11-09 00:28:07Z

Use semantic tags like fieldset to you advantage here to group elements. I also champion the proper use of label, not hijacking the place holder attribute for that purpose.

The example below could use a bit of style tidying but it will give you the idea.

It uses flexbox to achieve inlining the field where required.

#customerInformationForm {
  padding-top:2em;
}

fieldset {
  border: none;
  position:relative;  
}

#customerInformationForm  fieldset {
  padding-left:0;
}

#customerInformationForm {
  background-color:#DDD;
}

#customerInformationForm > fieldset {
  background-color:#EEE;
  padding: 1.5em 1em;
  margin-bottom: 0.5em;
  border-radius:5px;
}

input, select {
  width:100%;
}


legend {
  font-weight: bold;
  padding-left: 0;
  position:absolute;
  top:0;
}

label {
  display: block;
}

.flex {
  display:flex;  
  align-items:stretch;
}

.flex > .form_group {
  flex:1;
}

.form_group {
  margin-right:10px;
}

<div id="mainContainer">
  <div id="formContainer">
    <form id="contact" action="" method="post">
      <fieldset id="customerInformationForm">
        <legend>Customer Information</legend>
        <fieldset class="customer_name flex">
          <legend>Customer Name</legend>
          <div class="form_group">
            <label for="firstName">First Name</label>
            <input class="customerFullName" id="firstName" placeholder="Eg: John" type="text">
          </div>
          <div class="form_group">
            <label for="lastName">Last Name</label>
            <input class="customerFullName" placeholder="Eg: Smith" id="lastName" type="text">
          </div>
        </fieldset>
        <fieldset class="address">
          <legend>Address</legend>
          <div class="form_group">
            <label for="address1">Address 1</label>
            <input type="text" id="address1">
          </div>
          <div class="form_group">
            <label for="address1">Address 2</label>
            <input type="text">
          </div>
          <fieldset class="city_state flex">
            <div class="form_group">
              <label for="City">City</label>
              <input type="text" id="City">
            </div>
            <div class="form_group">
              <label for="state">State</label>
              <select id="state" name="state">
                <option value="" selected></option>
                <option value="Alabama">AL</option>
                <option value="Alaska">AK</option>
                <option value="Arizona">AZ</option>
              </select>
            </div>
          </fieldset>
          <div class="form_group">
            <label for="zip">Zip</label>
            <input id="zip" type="text">
          </div>
        </fieldset>
      </fieldset>
    </form>
  </div>
</div>

Collectives™ on Stack Overflow

HTML/CSS: How to make the certain input fields on the same line in the form?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related