Fluid forms with CSS

[jgarrard]

I have a simple form.

I am trying to be good and allow for both font sizing, and fluid
layout.

What I want is for the input boxes to align horizontally next to the
labels, but to jump down to the line below when the browser gets too
thin.

I have put up an quick example here:
http://www.thebunnyshed.co.uk/test.htm

I think I have sorted the labels, as these size properly when the font
size is changed.

However, I cannot work out how to:
A) Get the input boxes to use the "rest" of the horizontal space. If I
put "width:100%" then they are always on the line below (First form on
test page).

The second form is sort of what I want, but with the input boxes 100%
of available space.

B) Work out how to enforce a minimum width in IE so that they jump down
when they get too small.

I've been banging my head against a brick wall for hours now. Can any
CSS gurus point me in the right direction?
Many thanks,
Jeremy

[Ben C]

On 2007-01-19, jg******@parascan.com <jg******@parascan.comwrote:

I have a simple form.

I am trying to be good and allow for both font sizing, and fluid
layout.

What I want is for the input boxes to align horizontally next to the
labels, but to jump down to the line below when the browser gets too
thin.

I have put up an quick example here:
http://www.thebunnyshed.co.uk/test.htm

I think I have sorted the labels, as these size properly when the font
size is changed.

However, I cannot work out how to:
A) Get the input boxes to use the "rest" of the horizontal space. If I
put "width:100%" then they are always on the line below (First form on
test page).

"100% - 5em" is hard to do without tables. It's possible to set things
up like that with absolute positioning (you can make a box 5em from the
left and 0 from the right of its container, which means its width is
100% - 5em). But you won't get the jumping down when it's too narrow
which you want.

[snip]

I've been banging my head against a brick wall for hours now. Can any
CSS gurus point me in the right direction?

I don't think exactly what you want is possible without scripting.

You need to either make the labels a percentage as well instead of 5em,
or sacrifice the jumping-down effect and use a table or absolute
positioning. A table is the easiest.

[jgarrard]

Ben C wrote:

You need to either make the labels a percentage as well instead of 5em,
or sacrifice the jumping-down effect and use a table or absolute
positioning. A table is the easiest.

Many thanks for your reply. Looks like I will probably have to
sacrifice the jumping down then. I guess I'm just trying to do too
much.

Thanks again.