Simple question about displaying elements with all content floated

Posted 21 July 2010 - 10:51 AM

Hey all,

I have a question about how best to display a form, it seems like it should be simple but I have been messing with it for awhile now and still don't have a solution I am happy with so thought I would post here : - ).

So I have a basic form that looks like this :


<form id = "the_form">
    <p>
      <label for = "name">Name:</label><input type = "text" name = "name" id = "name" />
    </p>
    <p>
      <label for = "country">Country:</label><input type = "text" name = "country" id = "country" />
    </p>

</form>

And it is styled so the labels float, are displayed as block and given a width so they have a consistent width :

#the_form label{
	width:120px;
	display:block;
	float:left;
}

Standard stuff. However, I have put some validation on my form so that when it is submitted there are checks made to each field and ensure it conforms to various rules, if the field is not valid the submission is halted and an error message appears(in the form of a label) next to the invalid input and the input itself gets the class "invalid_field" added to it. So , for instance if the name field was invalid the html would look like this :

  <p>
     <label for = "name">Name:</label><input type = "text" name = "name" id = "name" class = 'invalid_field' /><label class = 'invalid_field'>Name is required</label>
  </p>

This of course results in the error label being floated to the left of the textbox, which is not what I want. I have tried applying floats to each of the error items like this :


label.invalid_field { 
	color: red; 
	padding:1px; 
	float:left
}


input.invalid_field {
	border:1px solid red;
        float:left;
}

Of course this makes all the content in that paragraph floated so the paragraph under it bunches up and gets crammed into the right of it. I fix this by putting clear:both on the paragraph tags, but that results in all the spacing between a paragraph with all floated content and a paragraph with some content not floated to be reduced to nothing. Again this seems like a simple issue to me but it has been giving me more trouble than I thought it would. Could anyone suggest a solution to this? I would appreciate it. Thanks much!

Jstall