cssuser - 1:03 pm on Aug 23, 2004 (gmt 0)

Hi,
I am new to css, and was looking at mechanisms for css based forms without tables.

I want the form fields to flow left to right as shown below:

label1 [.....] label2 [.....] label3 [.....]

but if the page width is such that only a label can be accomodated but not the associated field, i want the label and the field to come in a new line.

how do we achieve this.

currently my html form is a collection of fieldsets with each fieldset having labels with a child input tag.

<form action="act" method="post">
<fieldset> <legend> first field set </legend>

<label class="inputField">Label1 <input type="text" class="textField" name="field1"> </label>

<label class="inputField">Label2 <input type="text" name="field2" class="textField"> </label>

<label class="inputField">Label3 <input type="text" name = "field3" class="textField"> </label>

<label class="inputField">Label4 <input type="text" name="field4" class="textField"> </label>

</fieldset>
</form>

So basically if one window width can only accomodate fields 1 and 2 and label3 the output i am getting is some thing like ...

label1 [.....] label2 [.......] label3
[......] label4 [......]

But what i need is

label1 [.....] label2 [.......]
label3 [......] label4 [......]

Thanks