Topic: CSS form help (Page 1 of 1)

I'm trying to lay out a form using CSS the way we used to lay them out using tables, i.e. the prompt on the left side and the response area on the right. I would also like to be able to do this inside a div of any size.
I have tried assorted combinations of nested divs, floats and other techniques, but so far no luck.

This was always a snap using tables, but somehow the way to do it using CSS has so far evaded me.
Any help would be appreciated.



Few problems in life can't be solved by chocolate

A few points to consider:

1. Perhaps tables are a good idea. Forms, after all, tend to be a type of tabular data, so there's nothing inheritly wrong with using tables to display them. Consider whether or not this is the case. Note that any tables that are used should be styled with CSS and not oldschool HTML properties such as cellpadding, cellborder, width, height, etc.

2. If you decide that tables aren't what you want, consider that it might be nice to use table *algorithms* to lay out the form, while still using normal <div> and <p> tags normally for your markup. There are special display values (such as display:table-row) that cause everyday tags to be treated as though they were table tags. This is theoretically a good solution to using CSS to lay out pages. However, IE/Win doesn't support it, so it's virtually useless.

3. The final resort is using floats. I suggest using the following structure for each field:

<div><div class="labelcontainer"><label for="formelement1">Your Name:</label></div><div class="inputcontainer"><input type="text" id="formelement1" ... ></div></div>

And then specifying the widths of both inner div's (that's important), and then try floating the left one to the left or the right one to the right. It'll be messy, though.

rickindy: See the second example here:
www.alistapart.com/stories/practicalcss/

___________________
Emps

FAQs: Emperor

Thanks!
That is just exactly what I wanted to do.


Few problems in life can't be solved by chocolate