Experiment
In Form
Date created
18 March 2004
Date last modified
25 March 2004
Discussion
Visit the discussion

The Horizontal Form

Here I've made each fieldset extend the full width of the page. The main styling that's going on is the positioning of the form elements within the fieldsets. Because each element is contained inside a label tag, you can just float labels left, give them a bit of margin, and they line up horizontally (moving to the next line if there's not enough width).

Because I'm using floats, this form will look funky in some browsers unless you hack around with the code. Here's a page that uses clearing divs to make the fieldsets expand to fit the elements within.

Name
Address
Payment details
Credit card