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

The Margin Form

This form pseudo-replicates the lining-up-to-margins form style that was first posited by Eric Meyer (shown here). However, that version relied on extra mark-up to produce its effect. Here, the same code is used as in the previous templates, but each form input is display as a block-level element, positioned relatively, moved up a bit, and moved right a bit (using the CSS properties top and left). This means they all appear the same distance from the left, lining up neatly. You'll need a bit of negative margin-top on the label elements to fill in the space that's left by the relatively positioned elements.

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