I was experimenting with a MINIMAL MARKUP and wanted to find a way to line up 3 from element so that they took up 100% of the width of their container. More specifically, I wanted to have 2 items have fixed widths and the other APPEAR to take up the remaining space.
This kinda thing is a a piece of cake with Normal HTML elements . I mean to do something like this you would wrap the elements float the first element one way , the second the other way and give the last corresponding horizontal margins, display:block if necessary, or use overflow:hidden.
The problem seems to be that form control don’t actually become block elements when you give them “display:block”. That is you still have to give them explicit width , it seems and they do don’t naturally stretch to fill the container… etc. Or maybe I simply dont know how to reset them properly.
Essentially, this is what i have been toying with:
It seems to be a limitation of css/html. You could wrap only the input element inside a span set to block and apply border-box sizing to the input to prevent it from overflowing the span while only adding 2 tags. I understand where your coming from, simplicity is good but sometimes it’s not worth the frustration
Yes form elements are replaced elements like images and have intrinsic dimensions so you would need to to the same process that you would for an image to stretch them which is to put them in a suitable container first. (This has the added benefit in IE7 and under and avoids the margin bug on inputs.)
I usually wrap a span around the input and give the span left and right padding to match the padding and border on the input. Then the input can be given a 100% width and dragged into the padding area of the span for a perfect fit. This avoids using box sizing and will work back to ie6.