What am I missing? Form Layout

HTML & CSS
1

Hey Guys

I’ve recently created my first website using “Build your own website the right way.” using HTML and CSS.

I have just one question on my contact page:

Modern British Art Collective-The Best Modern British Art delivered to your door

I cannot get the text boxes to align.

On my CSS I have input the form.contact label.fixedwidth commands recommended in the book and similarly in my HTML, the references to class=“fixedwidth”. The form itself also used Freedback and their code.

Yet no matter what I try I cannot get the boxes to align neatly. What do I need to do!?

Look forward to hearing from you and thanks for helping me out!:slight_smile:

jamesg

2

I think this belongs in the CSS forum, but I’ll try to give an answer.

Put this in your CSS:

.fixedwidth { display:block; width:200px; float:left; }

The trick is to give the label a fixed width (hence the classname I guess… :slight_smile: ), in my case 200px but maybe you should use a relative unit. To do that you have to give it a display:block and then a float:left to get the input fields on the same line again.

3

Moved to CSS forum :slight_smile:

I think the main problem was that you forgot to add a class of contact to the form element and so the styles missed the target :slight_smile:

I prefer to use inline-block for form labels as it avoids the clearing and snagging issues of floats.

e.g.


label.fixedwidth {
    display:inline-block;
    vertical-align:middle;
    width: 220px;
    padding:0 20px 0 0;
    text-align:right;
    line-height:1.3;
}
textarea {
    vertical-align:middle
}
4

Thanks guys for coming back to me so quickly.

Had no idea if it was a CSS or HTML problem but am very grateful its now sorted and the alignment is as I wanted it!:slight_smile:

jamesg