Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Is it possible to create a form with input fields filling out all available space?

Is it possible to create a form with input fields filling out all available space?

Problem

i'm trying to create following layout:

http://jsfiddle.net/BTuMH/1/

but without setting the Width, like:

http://jsfiddle.net/yuGyg/

is this possible?

Problem courtesy of: sspross

Solution

http://jsfiddle.net/BTuMH/3/

Get rid off those divs, you don't need those? I've fiddled a somewhat cleaner version. Float the label (yes, you can use a label element instead of a div with class label) and use css to give the input maximum width.

Update:

This only works for firefox. This doesn't work for webkit. I hoped that using display: block; on the input element, it would calculate it's width by taking maximum space available behind the floated label. This does not work. I guess you'll have to use javascript to set the width after rendering the page.

Yet another update: I've made it work!

See http://jsfiddle.net/BTuMH/4/

With overflow: hidden; on a div wrapper, the input element can get 100% width, where 100% width is the width of the div. It didn't work before because the space behind the floated element was also occupied by the div, using overflow:hidden; fixes that.

Solution courtesy of: Justus Romijn

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Is it possible to create a form with input fields filling out all available space?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×