Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

Tommy Gebru
Tommy Gebru
30,152 Points

Why is the label element below, my checkbox?

Please help me position my label to the right of the checkbox. The code is below, using workspaces: HTML

<!DOCTYPE html>
<html>  
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/main.css">
    </head>  
    <body>
        <form action="index.html" method="post">        
        <h1>Sign Up</h1>
        <fieldset>

        <label for="name">Name:</label>
        <input type="text" id="name" name="user_name">

        <label for="mail">Email:</label>
        <input type="email" id="mail" name="user_email">

        <label for="password">Password:</label>
        <input type="password" id="password" name="user_password">
          <input type="checkbox" id="checkbox" ><label for="checkbox">Remember me</label>

          <button class="apply" type="submit">Submit</button>   
         </fieldset>


        <fieldset>
        <legend>Sign in With:</legend>

        <button class="google" type="submit">Google</button>

        <button class="facebook" type="submit">Facebook</button>

        <button class="twitter" type="submit">Twitter</button>     
        </fieldset>  
        </form>      
    </body>
</html>

`

THE CSS

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: 'Nunito', sans-serif;
  color: #384047;
}

form {
  max-width: 300px;
  font-size:1em;
  margin: 10px auto;
  padding: 10px 20px;
  background: #f4f7f8;
  border-radius: 8px;
}

h1 {
  margin: 0 0 30px 0;
  text-align: center;
}

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: #8a97a0;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
  margin-bottom: 30px;
}

input[type="radio"],
input[type="checkbox"] {
  margin-bottom:30px;
}

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


button {
  padding: 19px 39px 18px 39px;
  color: #FFF;
  background-color: #5a5;
  font-size: 18px;
  text-align: center;
  font-style: normal;
  font-size:1em;
  border-radius: 5px;
  width: 100%;
  border: 1px solid #5a5;
  border-width: 1px 1px 3px;
  box-shadow: 0 -1px 0 #5a5 inset;
  margin-bottom: 10px;

}

.apply {
  padding: 19px 39px 18px 39px;
  color: #FFF;
  background-color: #5a5;
  font-size: 18px;
  text-align: center;
  font-style: normal;
  font-size:1em;
  border-radius: 5px;
  width: 85%;
  border: 1px solid #5a5;
  border-width: 1px 1px 3px;
  box-shadow: 0 -1px 0 #5a5 inset;
   margin-top:30px;
   margin-right:0;
  margin-bottom: 10px;
  margin-left:30px;

}


.google  {background-color:#dd4b39;
          box-shadow: 0 -1px 0 #dd4b00 inset;
          border: 1px solid #dd4b00;
          text-align: center;
          width: 30%;
          margin: 5px;
          padding:2px;
}


.facebook {background-color:#3b5998;
          box-shadow: 0 -1px 0 #3b5977 inset;
          border: 1px solid #3b5977;
          text-align: center;
          width: 30%;
          margin: 5px;
          padding:2px;
}


.twitter {background-color:#4099ff;
          box-shadow: 0 -1px 0 #4099de inset;
          border: 1px solid #4099de;
          text-align: center;
          width: 30%;
          margin: 5px;
          padding:2px;
}


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

legend {
  font-size: 1.4em;
  margin-bottom: 10px;
}

label {
  display: block;
  margin-bottom: 8px;
}

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


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

  form {
    max-width: 480px;
  }

}

4 Answers

Chris Shaw
Chris Shaw
26,662 Points

Hi Teame,

The reason your label is appearing below the checkbox is because of the below CSS.

label {
  display: block;
  margin-bottom: 8px;
}

In order to have your label and checkbox aligned and it's a method I love to use is wrapping elements you need inline within their own parent element which allows you to bind specific reusable styles without affecting the rest of the form's flow.

<div class="inline-field">
  <input type="checkbox" id="checkbox">
  <label for="checkbox">Remember me</label>
</div>
.inline-field input,
.inline-field label {
  display: inline-block;
  margin-bottom: 0; /* I added this after I posted my reply */
  vertical-align: middle; /* Fixes any weird issues in Firefox and IE */
}

And that's pretty much it.

Tommy Gebru
Tommy Gebru
30,152 Points

Thanks Chris, can't believe I overlooked that.

display:inline

was a great solution and cleaning up the html helped too!

Stephen Blank
Stephen Blank
16,286 Points

You can remove display: block; from the label rule:

label { display: block; margin-bottom: 8px; }

Sahil Prajapati
Sahil Prajapati
8,524 Points

Even after making it inline label wont come up because of your forms width. Either reduce the width of password input box or increase the width of form to 531px or more.

Chris Shaw
Chris Shaw
26,662 Points

With the method I posted above it will fit with room to breath as DIV elements are always block level elements therefore it will force the checkbox and label to sit below the password field instead of next to it.

Sahil Prajapati
Sahil Prajapati
8,524 Points

Yes, I checked it. It depends if he wants the label above or if he wants to shift the checkbox and the label to the next line. From the question asked i felt he wanted the label to move up. But its better to move both of them to the next line as you have suggested.

Being that forms are tabular I prefer using tables. It is so much easier to line things up. This also eliminates the need for label elements. Just my opinion.

Chris Shaw
Chris Shaw
26,662 Points

Label elements are essential to UX and accessibility, not having them will render your site useless to those with impairments.

OK, put'm in the table.