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!

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

CSS

Abe Layee
Abe Layee
8,378 Points
Posted by Abe Layee
Abe Layee
8,378 Points

Form text alignment

Hello there. I have been practicing my form skill and I came across some little css bug. I need help. I want my text to align with each column. I tried setting vertical align to top , but nothing interest happens. Normally, some people put the label tag in a div to help with the alignmen but I am trying to figure it out with the float mehod. Any solutions is appreciated. Thank you. 

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form and Table</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <form action="#" method="post" id="main-form">
        <fieldset>
         <legend>Your Info</legend>

            <label for="first_name">First Name:</label>
            <input type="text" id="first_name" name="first-name" maxlength="30">

            <label for="last_name">Last Name:</label>
            <input type="text" id="last_name" name="Last-name" maxlength="30">

            <label for="email">Email:</label>
            <input type="email" id="email" name="Email" maxlength="50px">
                <label for="textarea">Comment</label>
               <textarea name="" id="textarea" cols="30" rows="10"></textarea>
           <button type="submit" name="user_submitted" id="button">Send Message</button>
        </fieldset>

    </form>
</body>
</html>

#main-form label {
    display:inline-block;
    float:left;
    width:100px;
       vertical-align:top;//not working
       text-align:right// not working

}

form {
    max-width:600px;
    margin:100px auto;

}
#main-form input {
     width:400px;
     padding:10px;
     box-shadow:1px 1px 0 rgba(0,0,0,0.1) inset;
     background:rgba(255,255,255,0.1);
     border-radius:5px;
     background-color:#ccc;
     color:#fff;
     margin:10px 0;

}


#main-form legend {
    font-size:1.5em;
    margin-bottom:10px;
    text-align:center;
}

#button {
     padding:10px;
     background-image:linear-gradient(#222,#bbb);

}

textarea {
     height:200px;
     width:424px;
     background:rgba(12,80,90,0.1);
     color:#000;


}

2 Answers

Mark Matthews
Mark Matthews
4,652 Points
Mark Matthews
Mark Matthews
4,652 Points

from a quick glance, you have your legend and label tags have incompatible values in several attributes: margin, border, padding, width and height. if your 

<input> </input>

has a margin of 10 | 0 (t./b | l/r) with a padding of 10 - 20 px

and your 

<label></label>

has no margin and no padding. adding 10px to the top or bottom margin of <label> would be the fastest fox

or

css

    label {
    display: inline-block;
    min-width: 15%;
    padding-top: 20 px;
    margin-right: 10px;
    margin-top: 5px;
    margin-left: 50px;
    text-align: right;
}

form {
    max-width: 600px;
    margin: 100px auto;
}

input {
    width: 50%;
    height: 20px;
    padding-top: 5px;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1) inset;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    background-color: #ccc;
    color: #fff;
    align-content: left;
    margin: 10px 10px 0 0;
}

textarea > label {
    margin: 100px
}

legend {
    font-size: 1.5em;
    text-align: center;
}

#button {
    margin-left: 25%;
    padding: 10px 0;
    background-image: linear-gradient(#222, #bbb);
}

textarea {
    height: auto;
    margin: auto;
    width: 400px;
    background: rgba(12, 80, 90, 0.1);
    margin: 10px 0;
    color: #000;
}

this probably gets you closer to what you want. you have to think about the text labels almost backwards you move them left and right by removing space from around the left side and then adding space to right side to move it in, to move closer to another object, you have to remove the padding space and make the border as close to the text as possible. the text doesn't move w/ in the box. ps, the float:left for the without using div tags is a headache,

Abe Layee
Abe Layee
8,378 Points
Abe Layee
Abe Layee
8,378 Points

Thank you Mark Mathews for the tips.