Excellent post! Thanks. I updated the article and linked to your site. Michiel
Ingo Chao wrote: > Michiel van der Blonk wrote: > >> For long I have been looking for the easiest way to create forms >> without tables. I found several methods: >> - floating >> - position:absolute >> - display:inline-block & display:-moz-inline-box >> >> All come with their own caveats and problems. The floating is usually >> considered the "best". However, it's not easy to align the input's under >> each other. >> >> The problem is usually that even if I give the label a width, it is not >> used by the browser, since it is inline, so it has to be made floating. >> Then when resizing the font the floating elements start shifting, and >> everything messes up. >> >> Recently I found out that if I give the label a little bit of padding, >> or an invisible border (color same as background) that the inputs are >> suddenly aligned correctly in both IE and FF. >> > > I'll try to discuss your test page > http://test5.caribmedia.com/CSS/michiel/floating-forms.html > > (The following ascii art should align with fixed font size.) > > >> look at the difference between: >> form {width:20em} >> label {float:left;width:10em;margin-bottom:1em;} >> input {float:left;} >> > > Because of the margin-bottom of 1em, the label is taller than the input. > Apply a background color to see. > > |label| [input] > | | > > Floats do hook, they float /up/ as high as possible (e.g. not higher > than any preceding float [1]) . The subsequent label/input shows this: > > > |label| [input] > | | |label| > | | > [input] > > > There is enough room for both the labels side by side: > 2 x 10em = 20em = width of the form > > There is no room left for the second input; therefore, this float /drops/ . > > > > >> and >> form {width:20em} >> label {float:left;width:10em;margin-bottom:1em;padding:1px} >> input {float:left;} >> > > > >> for this html >> <form action=""> >> <label>Name</label><input> >> <label>Address</label><input> >> <label>Email</label><input> >> </form> >> >> > > > The box model adds the padding to the width: the overall width of label is > 1px + 10em + 1px > > But the form still has a width of 20em only. There is not enough room > for floating up of the subsequent label, the label itself drops. > > |label| [input] > | | > > |label| [input] > | | > > > A similar effect can be achieved with the property "clear" on label [2]. > > Ingo > > [1] some older browser will float up as high as possible regardless of > preceding floats. > [2] IE/Win has problems with float+clear on the same element. > > ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
