Sent by Ingo Chao on 10 February 2006 20:08
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.
--
http://www.satzansatz.de/css.html
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
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/
