Previous Message
Next Message

tableless forms

The following terms have been highlighted: tableless forms [remove highlighting]

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

(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|
         |     |

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].


[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-REMOVED]]
IE7b2 testing hub --
List wiki/FAQ --
Supported by --
Previous Message
Next Message

Message thread:

Possibly related: