floating forms

demo page and complete report

I learned several advanced and quick methods of styling layout without tables, mainly used for forms, where fields should always be aligned:

inline block

label {display:-moz-inline-box; _display: inline-block}

This effectively pushes the fields to a fixed position on the right of the label, and works in almost all browsers

absolute positioning

Absolute positioning of the forms gives you the possibility to shift the fields to the right using relative positioning, as follows

form {position:relative}
input {position:absolute;left:10em}


Last but not least there is floating. This is usually complex because

  1. the height of labels and fields needs to be equal for correct floating/alignment, and
  2. the width of label+height should (almost) equal the form width. There should be room for margin/padding/rounding errors/font-size setting (in case of pixel widths)
  3. form {width: 20em}
    label {float:left; line-height:1.5em; margin-bottom:.2em; width: 9.5em}
    input {float:left; line-height:1.5em; width: 9.5em}

    This can however be fixed by adding a little border or padding to the label, assuming both have the same font size, like this:

    form {width: 20em}
    label {float:left; margin-bottom:1em; width: 10em; padding-right:1px}
    input {float:left}

    In this solution you can play around with margins as much as you like without messing up the display. If anybody can explain to me why this works please let me know.

    update: Ingo Chao explained why it works. The width of the label is exactly half of the form’s width. By adding that 1 pixel, two labels cannot go side by side and thus the next label in row will drop. In the original scenario (no widths, or no extra pixel) the first label moves up, but leaves space on the left, where the next label doesn’t fit, and so it moves down. That doesn’t sound very clear, but I’ll see if I can put an image here soon.

    update2: using label {clear:left} fixes the problems too.


14 thoughts on “floating forms

  1. Hi Michiel,

    I enjoyed exploring your floating form elements. I happened to find that in Safari 2.0.4 and in Opera 8.52 the Opt-in checkbox is pushed online up next to the “Calendar” button. In Safari this happens only with larger font sizes, in Opera it seems to be a consistent error.

    Still, a great article and great work.


  2. Well Harry, it’s not that simple. You have to combine this with a server side script, e.g. in PHP, where the email address is specified. In PHP you can send email using the mail() function.

  3. Hi I have a litle quetion to ask you guys, I woundering if anyone knows about dynamic drive? so my question is: theirs a contact form in css, I was woundering if we submit it what deos it do? cause I’m a bit confused about where i’m going to add my e-mail so when some one submit the message it geos to the adress specified. I’m waiting you anwsers thks

  4. Rolando, see above – Harry asks about the same thing.

    It’s just a form. Forms are not ’emailed’ when submitted, they are sent to a page for processing – php is good for this.

    Then you would usually place the info into a database.

    So, you have to set the ‘action’ for the form. That can be the same file as the page the form is on, or another php file. I usually use the same one.

    Submitting the form produces a POST or a GET depending on your form method. GET means a url that has like paramaters, like blah.php?cow=salad&page=1

    you access those parameters as variables in php. If it’s a post, you do the same but it’s a bit different (in php5, $_GET[‘whatever’] vs. $_POST[‘whatever’]

    I’d suggest finding a tutorial about form submission in php. If you want it emailed to you, you use php to make sure the form is valid first – all fields are not blank, etc.

  5. hi i’m new in the css and coding world i’m trying a form from dynamic and saw ur coment decided to come n c it well i’m able to c it offline in a html format but i dont know where do add an email adress to recive the feed back i pe u or nyone can help me thnk you

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s