Marti's blog

Flexible HTML layouts are designs that adapt to the user screen and browser window by not using "hard" width and height: using CSS, sizes are set in percentage and not in pixels. In a time and age where users have screens ranging from 320x240 pixels (PDA and smart-phones) to 2540x1600, I think this is a great quality for any web site to have. Flexible layouts however are harder to do, because it's hard to get them to look pretty at varying screen sizes (large resolutions tend to make the page look empty, and at small resolutions it might look too crowded).

There's another hurdle that goes with making flexible layouts: getting form fields to be as flexible as other elements isn't as easy as it's supposed to be. Normally, all you have to do is set a CSS rule such as input, textarea { width: 100% } and your field is supposed to stretch to the width of its containing element. Well, as I found out this week, neither Firefox nor Internet Explorer (6 or 7) can get this right.

Firefox

It's the least buggy of the bunch, but it still has issues with textarea elements set to 100%. The trick is to go for a slightly lower value like 99% or maybe a bit lower depending on your situation. As it turns out, this also helps with Internet Explorer.

Internet Explorer

Both the 6 and 7 version have issues. The 6 is the worst and I have had great difficulties to get fields to flex properly. In the end I've found a hack that puts different CSS for version 6 and other more modern browsers (including version 7). I've always refused to use any non-standard trick to apply different CSS rules to different browser, but this one is 100% standard and quite clean:

input, textarea { width: 30em }
input[type="text"], textarea[id="IdOfTextarea"] { width: 99% }

With these rules, all elements are first sized to 30em, then browsers who are compatible with attribute selectors will apply the following line to elements with the proper name, type or whatever attribute you use to select them.

However I've still had difficulties going on with Internet Explorer 7 and textarea. Adding a style="width: 100%" to a container such as a div has managed to get the thing right.