jayachandra chillipuri jayachandra chillipuri - 1 year ago 68
CSS Question

html form layout arrangement

I was trying to create a registration form and I encountered a problem.

Output is as shown in image belowenter image description here
As shown in the image I want the address to be at the top of the line as indicated without using style position relative or absolute. Is it possible to fix that with margin or padding. And the other thing is why the address text is appearing in the bottom, doesnt it be at the top by default? Is it because of textarea?
Thanks in advance

tzi tzi
Answer Source

To align verticaly 2 inline-block elements, you can use vertical-align. In your case:

.container span {
    margin-top: 10px;
    padding-left: 40px;
    display: inline-block;
    width: 30%;

    /* Add vertical alignment */
    vertical-align: top;

Here is a fiddle.