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

Tommy Gebru
Tommy Gebru
30,164 Points
Posted by Tommy Gebru
Tommy Gebru
30,164 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,676 Points
Chris Shaw
Chris Shaw
26,676 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,164 Points
Tommy Gebru
Tommy Gebru
30,164 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
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
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,676 Points
Chris Shaw
Chris Shaw
26,676 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
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.

Jeff Busch
Jeff Busch
19,287 Points
Jeff Busch
Jeff Busch
19,287 Points

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,676 Points
Chris Shaw
Chris Shaw
26,676 Points

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

Jeff Busch
Jeff Busch
19,287 Points

OK, put'm in the table.