Hi

 

I've been asked to do a form that will be laid out something like below. The layout is a lot more complex than any I've done before. I'd like to layout the whole thing using css - but bit overwhelmed by the layout for this. Do you think in this case it would be okay to use a table and css? Any thoughts on the best way to approach this would be much appreciated. Not too confident with using css for such a complicated layout - if anyone's got any pointers that would be brilliant.....Bit worried a layout like this might display strangely in different browsers relying on css for layout.

 

FIELDSET TITLE

label(to left): text form field

..............................

FIELDSET TITLE 2

label(to left: text form field; label(on top of):text form field; label(on top of):text form field.

Text here.

label(to left: text form field; label(on top of):text form field; label(on top of):text form field.

More text here.

Same as above for about 10 rows then:

label(to left): text form field

label(to left): text form field

 

Same as above for about 5 rows.

Tables would be the easier way to get the layout quickly....but in the long run may well end up being more fiddly to work with & style.

 

I would go for CSS - you shouldn't have too many problems with it.

 

instead of looking at it as being a complicated form - think of it in terms of a normal CSS layout...what do you need to do - look at the bigger picture first, then fill in the details.

 

So start by making the 3 elements side by side - create a class & apply it to 3 divs....when you have this basic layout working, then start putting in the form elements into these divs. Give the labels a fixed width so that everything aligns nicely. Where the label has to appear on top of a field, either simply put a <br> after the label, or create a class that sets display: block; so that the field will drop down below it.

 

Think through it step by step & it should all be ok...I'm sure once it has been broken down into smaller parts that its now more complicated than what you've done before.

Tables would be the easier way to get the layout quickly....but in the long run may well end up being more fiddly to work with & style.

 

I would go for CSS - you shouldn't have too many problems with it.

 

instead of looking at it as being a complicated form - think of it in terms of a normal CSS layout...what do you need to do - look at the bigger picture first, then fill in the details.

 

So start by making the 3 elements side by side - create a class & apply it to 3 divs....when you have this basic layout working, then start putting in the form elements into these divs. Give the labels a fixed width so that everything aligns nicely. Where the label has to appear on top of a field, either simply put a <br> after the label, or create a class that sets display: block; so that the field will drop down below it.

 

Think through it step by step & it should all be ok...I'm sure once it has been broken down into smaller parts that its now more complicated than what you've done before.

 

Thank you so much - this is really helpful advice. Has helped alleviate the panic. I'll get cracking with this using the 3 divs.

 

Thanks again - this is brilliant.