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

Desmond Dallas
Desmond Dallas
6,985 Points
Posted by Desmond Dallas
Desmond Dallas
6,985 Points

Help please

Im trying to do a sign up form

The first and surname boxes are to be positioned to the right further to the right and as you can see there is an orange outline to the right which I cannot get rid off.

Also I want to position the email and password below this and following date, login and remember following underneath. Can anyone please tell me where Im going wrong.

CSS body { background-color: white; width: 100%; }

.header {background-color: red; }

.name {

background-color: orange;
width: 25%;
float: right;

}

.mail { overflow: background-color: pink; width: 40%; float: right; }

HTML

<!DOCTYPE> <html> <head> <title>LessonForm</title> <link href="javascriptform.css" type="text/css" rel="stylesheet"/> <head>

<body> <div class="header"> <h1>Test</h1> </div>

    <div class="name">
      <form class="f_name">
      <input type="text" placeholder="First name" name="uname" required="required">
      <input type="text" name="username" placeholder="Surname" required="required">
    </form>
    </div>


    <div class="mail"
    <form class="user_email">
      <input type="text" name="username" placeholder="email" required="required">
      <input type="password" name="password" placeholder="Password" required="required">
    </form>
    </div>

    <div class="birthday">
      <input type="date" name="bday">
    </div>

    <div class="btype">
      <button type="submit">Login</button>
    </div>

    <div class="c_box">
    <input type="checkbox" checked="checked"> Remember <menu>
    </div>

  </form>
</div>

</body> </html>

Joseph Chiang
Joseph Chiang
3,942 Points
Joseph Chiang
Joseph Chiang
3,942 Points

Remember to use three backticks (```) surrounding your code so that it can all be formatted. First of all I noticed this:

<div class="mail"
    <form class="user_email">
      <input type="text" name="username" placeholder="email" required="required">
      <input type="password" name="password" placeholder="Password" required="required">
    </form>
    </div>

can you see it? There is no closing '>' after the first line. Take a snapshot of your workspace and preview so the problem may be addressed further in greater detail.

Desmond Dallas
Desmond Dallas
6,985 Points
Desmond Dallas
Desmond Dallas
6,985 Points

thank you, im getting there slowly :)

3 Answers

Desmond Dallas
Desmond Dallas
6,985 Points
Desmond Dallas
Desmond Dallas
6,985 Points

Thanks for your help but the boxes are still not all the way to the right.

body { background-color: white; width: 100%; }

.header { background-color: red; }

.name { width: 40%; float: right; }

.mail { width: 40%; float: right; clear: right; }

input[type=text], input[type=password] { width: 80%; padding: 12px 20px; margin: 0px 0; border: 2px solid #ccc; margin-right: 0%; margin-left: 0%; }

.btype { margin: 8px 0; clear: right; float: right; }

.c_box { margin: 8px 0; clear: right; float: right;}

.birthday { clear: right; float: right; }

<!DOCTYPE> <html> <head> <title>LessonForm</title> <link href="javascriptform.css" type="text/css" rel="stylesheet"/> <head>

<body> <div class="header"> <h1>Test</h1> </div>

    <div class="name">
      <form class="f_name">
        <input type="text" placeholder="First name" name="uname" required="required">
        <input type="text" name="username" placeholder="Surname" required="required">
      </form>
    </div>

  <form>
    <div class="mail">
      <form class="user_email">
        <input type="text" name="username" placeholder="email" required="required">
        <input type="password" name="password" placeholder="Password" required="required">
      </form>
    </div>

    <div class="birthday">
      <input type="date" name="bday">
    </div>

    <div class="btype">
      <button type="submit">Login</button>
    </div>

    <div class="c_box">
    <input type="checkbox" checked="checked"> Remember <menu>
    </div>
 </form>

</body> </html>

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

The orange outline is actually the background you have specified in the CSS for the "name" class, which surrounds those input elements and is exposed in the space between and around them.

To move the email and password boxes below the others, you can add "clear: right;" to the CSS rule for ".mail". You might also want to make the width of ".mail" and ".name" be the same.

And also in the ".mail" rule you have started a definition for the property "overflow:" but there's no value and semicolon after it, which causes the pink background setting that follows it to be ignored.

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

You've added a new rule for the boxes themselves that constrains them to 80% of the container width.

You could remove that constraint to make them side-by-side again, or you could expand them to fill the container (100%) to have each one on a separate line. If you choose the latter, you may also want to add "box-sizing: border-box;" so the paddings don't cause overflow.