Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Stephanie Roberts
Stephanie Roberts
16,757 Points

HTML Forms

I just finished the HTML form challenge and I am wondering how can you place the first name and last name on the same line and not below eachother?

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Stephanie,

I went ahead and fixed both your html and css code blocks for you.

This thread will show you how to do that: https://teamtreehouse.com/forum/posting-code-to-the-forum

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Do you want both labels and inputs all on one line? In other words, all 4 elements on one line?

Or do you still want the labels to be above the inputs but it would be more like 2 columns with the first name label and input on the left and the last name label and input on the right? The labels would still be above their respective inputs.

6 Answers

Chris Shaw
Chris Shaw
26,676 Points

Hi Stephanie,

The easiest way is to add a class to each input field and setup the selector like the below example.

<input type="text" name="first_name" placeholder="First name" class="inline-element">
<input type="text" name="last_name" placeholder="Last name" class="inline-element">

.inline-element {
    display: inline-block;
}
Matthew Smart
Matthew Smart
12,567 Points
Matthew Smart
Matthew Smart
12,567 Points

show me the code and i will show you :)

Stephanie Roberts
Stephanie Roberts
16,757 Points
Stephanie Roberts
Stephanie Roberts
16,757 Points 
form {
  width: 500px;
  margin: 10px auto;
  padding: 10px 20px;
  background:  #F8F6F5;
  border-radius: 8px;
  float: left;
  margin-left: 224px;
}

h2 {
  margin: 0 0 30px 0;
  text-align: center;
  font-family: 'Droid Sans', sans-serif;
  -webkit-font-smoothing:antialiased;
  color: #414a50;
}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea,
select {
  background: rgba(255,255,255,0.1);
  border: none;
  font-size: 16px;
  height: auto;
  margin: 0;
  outline: 0;
  padding: 15px;
  width: 100%;
  background-color: #e8eeef;
  color: #414a50;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
  margin-bottom: 30px;
}

input[type="radio"],
input[type="checkbox"] {
  margin: 0 4px 8px 0;
}

select {
  padding: 6px;
  height: 32px;
  border-radius: 2px;
}

button {
  padding: 19px 39px 18px 39px;
  color: #FFF;
  background-color: #DD4B4C;
  font-size: 18px;
  text-align: center;
  font-style: normal;
  border-radius: 5px;
  width: 100%;
  border: 1px solid #DD4B4C;
  border-width: 1px 1px 3px;
  box-shadow: 0 -1px 0 rgba(221, 75, 76, 1) inset;
  margin-bottom: 10px;
}

fieldset {
  margin-bottom: 30px;
  border: none;
}

legend {
  font-size: 1.4em;
  margin-bottom: 10px;
  color:#414a50;
  font-family: 'Droid Sans', sans-serif;
  -webkit-font-smoothing:antialiased;
}

label {
  display: block;
  margin-bottom: 8px;
  color: #414a50;
}

label.light {
  font-weight: 300;
  display: inline;
}

.number {
  background-color: #DD4B4C;;
  color: #fff;
  height: 30px;
  width: 30px;
  display: inline-block;
  font-size: 0.8em;
  margin-right: 4px;
  line-height: 30px;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255,255,255,0.2);
  border-radius: 100%;
}

@media screen and (min-width: 480px) {

  form {
    max-width: 480px;
  }

}
Stephanie Roberts
Stephanie Roberts
16,757 Points
Stephanie Roberts
Stephanie Roberts
16,757 Points 
<form action="index.html" method="post">
        <h2>Contact me</h2>

       <fieldset> 
         <legend><span class="number">1</span> Your details</legend>

            <div class="full_name">
                <label for="name">First Name:</label>
                <input type="text" id="name" name="first_name">
                 <label for="name">Last Name:</label>
               <input type="text" id="name" name="last_name">
           </div>

             <label for="name">Email:</label>
            <input type="text" id="mail" name="user_email">
             <label for="name">Subject:</label>
            <input type="text" id="subject" name="user_subject">
         </fieldset>

        <fieldset>

           <legend><span class="number">2</span>Your Message</legend>

           <label for="name">Message:</label> 

          <textarea id="message" name="user_message"></textarea>
        </fieldset>
        <button type="submit">Submit</button>

      </form>
Stephanie Roberts
Stephanie Roberts
16,757 Points
Stephanie Roberts
Stephanie Roberts
16,757 Points

All four elements on one line would be good

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Currently your label element has display: block This puts it on it's own line with the form control underneath it.

Assuming you still want that for all the other form controls but not for the full name part then what you need to do is target only the labels inside the "full_name" div and then set their display back to inline This will get all 4 of those elements back on the same line.

Then you may need to target each one to set widths and margins to how you want them all to be spaced out.

I did a codepen demo illustrating this: http://codepen.io/anon/pen/EFkKo

i also noticed that you used the same id for both the first name and last name input. I corrected this in the demo and also made sure the for attribute matched the id it belongs to.

You should also check your other labels. They all have for="name" Change that value so that it matches the id of the form control it goes with.

Let me know if you're having anymore troubles with it.