By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,446 Members | 1,185 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,446 IT Pros & Developers. It's quick & easy.

Fluid forms with CSS

P: n/a
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

Jan 19 '07 #1
Share this Question
Share on Google+
2 Replies


P: n/a
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.
Jan 19 '07 #2

P: n/a
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.

Jan 20 '07 #3

This discussion thread is closed

Replies have been disabled for this discussion.