Multi-Column Forms Best Practice — OZONE Asylum, home of the Mad Scientists

CSS - DOM - XHTML - XML - XSL - XSLT

Multi-Column Forms Best Practice

This page's ID: 29376

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	I like the fieldset idea. That makes things better but I do need to <span> element as I might have a complex widget such as [code]<span><input type="text"/><input type="button" value="..."/></span>[/code] or [code]<span><input type="text" id="month"/><input type="text" id="day"/><input type="text" id="year"/></span>[/code] Using your ideas I have something such as [code]<style type="text/css"> label { display: block; width: 50%; float: left; } </style> <form> <fieldset> <label>Label 1 <input type="text"/><input type="text"/><input type="text"/></label> <label>Label 2 <input type="text"/></label> </fieldset> <fieldset> <label>Another Label 3 <input type="text"/></label> <label>Another Label 4 <input type="text"/><input type="button" value="..."/></label> </fieldset> </form>[/code] Which gives me a two column look, but I think I am going to need to throw a <span> in there around the label text to get it to be a standard size, unless there is some selector that allows a style to be applied to the first text attribute child, but I have not heard of that in CSS2. Adding spans I get [code]<style type="text/css"> label { display: block; width: 50%; float: left; } label span { display: block; width: 25%; float: left; } </style> <form> <fieldset> <label> <span>Label 1</span> <input type="text"/> <input type="text"/> <input type="text"/> </label> <label> <span>Label 2</span> <input type="text"/> </label> </fieldset> <fieldset> <label> <span>Another Label 3</span> <input type="text"/> </label> <label> <span>Another Label 4</span> <input type="text"/> <input type="button" value="..."/> </label> </fieldset> </form>[/code] This has the problem of some ugly line wrapping when the inputs take up more than 37.5% of the page. I do not want to work with pixel widths, and if I want to setup a 1st element float, second element margin situation I am going to have to apply spans around the input elements which puts me back into the original ugly markup area. And I am still not too keen on the spans around the label text as it is. Dan [url=http://www.codetown.org]Code Town[/url] \| [url=http://www.zombiehead.org]Zombie Head[/url] \| [url=http//www.howmuchtp.com]How Much TP?[/url] Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu