CODEWITHSUNDEEP
htmlcssforms
Anthosiastic
Anthosiastic

Reputation: 69

How to make the label is same line with Textarea.

I'm so confused why text area is not really one line with Message. The message is at the bottom, it supposed to be on the top. My code is like this.

<table>
                    <tr>
                        <td class="contact-firstcol"> <label for="name">Name</label> </td>
                        <td class="contact-secondcol"> : </td>
                        <td class="contact-thirdcol"> <input type="text" name="name" id="name" /> </td>
                    </tr>
                    <tr>
                        <td class="contact-firstcol"> <label for="email">Email</label> </td>
                        <td class="contact-secondcol"> : </td>
                        <td class="contact-thirdcol"> <input type="text" name="email" id="email" /> </td>
                    </tr>
                    <tr>
                        <td class="contact-firstcol"> <label for="phone">Phone</label> </td>
                        <td class="contact-secondcol"> : </td>
                        <td class="contact-thirdcol"> <input type="text" name="phone" id="phone" /> </td>
                    </tr>
                    <tr>
                        <td class="contact-firstcol"> <label for="message">Message</label> </td>
                        <td class="contact-secondcol"> : </td>
                        <td class="contact-thirdcol"> <textarea id="message" name="message"></textarea> </td>
                    </tr>
                    <tr>
                        <td class="contact-firstcol"></td>
                        <td class="contact-secondcol"></td>
                        <td class="contact-thirdcol"> <input type="submit" name="submit" value="SUBMIT" /> </td>
                </table>

and my CSS is here.

    table {
    line-height:30px;
}
.contact-firstcol {
    width:100px;
    font-size:17px;
    letter-spacing:2px;
    border:1px solid white;
}
.contact-secondcol {
    color:#FFFFFF;
    font-family:'alegreya_sansregular';
    width:20px;
    text-align:center;
    font-size:17px;
    border:1px solid white;
}
.contact-thirdcol {
    width:400px;
    padding-left:20px;
    border:1px solid white;
}
.form textarea {
    width: 250px;
    max-width: 250px;
    height: 100px;
    max-height:100px;
    line-height: 150%;
}

So far I tried to use this way. and it's not working at all.

margin-top:-20px padding-top:-20px;

Have a look at JSFIDDLE. Can you give us any suggestion for this problem?

Upvotes: 1

Views: 4921

Answers (2)

Cosmin Vană
Cosmin Vană

Reputation: 1582

You need to update the css class:

.contact-firstcol {  
    width:100px;
    font-size:17px;
    letter-spacing:2px;
    border:1px solid white;
    vertical-align: top;
}

I added "vertical-align: top;" to it.

Upvotes: 0

Ming
Ming

Reputation: 4578

vertical-align of table cells is by default in the middle. Just change it to top.

http://jsfiddle.net/B3z6Z/1/

td { vertical-align: top; }

Upvotes: 5

Related Questions