I have been working on a table-less form style for some time. The sample I've included below comes close to what I'm looking for. But I can't get it to stretch to full width.
What I am trying to do is create forms that allow me to have a liquid presentation that scales well when the font size is changed or the browser is resized. I also want to put multiple fields on the same row. Plus, of course, I want it to be browser independant and degrade well. The sample below almost achieves all of these goals. The problem is that the side by side look is lost if the side by side elements are sized larger than about 45%. (See width on the fieldset or the label elements.) At 50% they always wrap. This is not suprising. At 49% it rarely works, at 48% it works when the font size is small and screen is large. By 47% they work for most situations but still get funny when the screen size gets real small. This last is ok, but what's not ok is that when I use 47% I get large right margins that don't look good. I have two questions for the list: 1) Can anyone tell me why the styling I've used does not work when the width is set to fill the whole width of the container? 2) Can anyone suggest a way to get liquid, stretchable, sizable side-by-side form fields that actually fill the whole width of the container? Thanks, Will Merrell CIO TeamTrack Communications Sample Code Follows: ------------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <title>Form Test</title> <style type="text/css"> <!-- body { background: #FFFFFF; color: #000000; font: 1em Arial, Helvetica, sans-serif; margin: 0em; padding: 1em; } form { position:relative; float: left; width: 100%; background-color: #ddddff; } fieldset { position:relative; float: left; width: 47%; margin : 0em; padding: 0.1em; } legend { background: #ffff99; color: #660000; margin : 0em; padding: 0em 0.2em 0em 0.2em; border:0.05em solid #9999ff; } label { position:relative; float: left; background: #ffff99; color: #660000; width: 45%; text-align: left; margin : 0em; padding: 0.125em 0.25em 0.125em 0.125em; border:0.05em solid #f0e066; } input { position:relative; font-size: 1em; text-align:left; width:100%; margin : 0em; padding: 0em; border: 0.05em inset #c0c0c0; } button { margin: 0.5em; } .clearer { display : block; clear: both; height: 0em; } .hidden { display:none; } --> </style> </head> <body bgcolor="#ffffff" > <form method="post" action="index.html"> <input type="hidden" name="submit" value="" /> <fieldset><legend>Set 1</legend><br class="hidden" /> <label for="tf1a">Field A: <input type="text" id="tf1a" value="One A" /> </label> <label for="tf1b">Field B: <input type="text" id="tf1b" value="One B" /> </label> </fieldset><br class="hidden" /> <fieldset><legend>Set 2</legend><br class="hidden" /> <label for="tf2a">Field A: <input type="text" id="tf2a" value="Two A" /> </label> <label for="tf2b">Field B: <input type="text" id="tf2b" value="Two B" /> </label> </fieldset><br class="hidden" /> <div class="clearer"> </div> <button type="submit" name="submit">Submit</button> </form> </body> </html> ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/