How to create a horizontal form?

HTML & CSS
1

URL: http://tinyurl.com/28u6fz4

I am working on a horizontal form that will go into the box right above the footer. I’m wondering if someone can help me make the labels and inputs display horizontally instead of stacked like normal. I’m clueless.

Thanks!

2

It’s not quite clear how you want that form laid out. Does everything need to be on one line? Using something like

form div {float:left;}

will get yu started, but you’ll have to reduce the widths on labels and inputs to allow everything to fit on one line.

3

Thanks for the nudge. :slight_smile: Yes, it needs to display on one line. I’m almost there! Thanks again.

4

Okay, I’m stuck on something else…

I am trying to target the labels for phone number and class interest so that I can make them longer, but I can’t figure out how to do it. They each have a class and an id, but I must not be writing the CSS correctly.

Also, the submit button is currently behind the footer background instead of directly to the right of the email field. Do you know how to bring that up?

Thanks for any help!

EDIT TO ADD: I figured out how to target those labels. Now all I need is for the submit button to be up on the same line…

5

Now all I need is for the submit button to be up on the same line…

Hi Susan,
If you float your fieldset left it will shrinkwrap the box and allow your floated submit button to pop up.

It looks like you will need to force your div.registerform to contain it’s floats then, overflow:hidden is the usual method.

6

Thanks so much, Ray. I don’t know what’s wrong with the submit button, though. When I was playing in Firebug and moving the button with margins (just to see what would happen), it was cut off like that. I don’t think it has anything to do with overflow:hidden. Hmmmmmm…

7

It’s picking up a 12px height from line 158 in your style.css, you need to override it :wink:

8

Oh my gosh. :blush: Thanks, Ray. :slight_smile: