html - CSS - how to place an error/hint message to the right of the input box -


I currently have a simple form with a label located above the input box and a signal / error message.

  & lt; Form id = "registerForm" method = "POST" action = "register_post.php" & gt; & Lt; P class = "form-registerUserName" & gt; & Lt; Label = "registerUserName" & gt; Username & lt; / Label & gt; & Lt; span class = "required" & gt; * & Lt; / Span & gt; & Lt; Input id = "registerUserName" type = "text" size = "24" maximum length = "24" value = "& lt ;? php echo $ _SESSION ['registerUserName'] ;? & gt;" Onkeyup = "validateName ()" onblur = "validateName ()" & gt; & Lt; Label class = "hint" = "registerUserName" & gt; Signal error & lt; / Label & gt; & Lt; / P & gt; & Lt; / Form & gt;   

What would be the best way (CSS-wise) to place the second label element on the right side of the input box to give a certain distance and vertical position in the box? Is this the best way to add an element to signal HTML?

I'm trying to look like this on the first example on this page:

thanks in advance. /p>

I will do this by putting the labels in a wrapper box and they will be left to the left, then adjust the space To use padding on the second label.

  & lt; Form id = "registerForm" method = "post" action = "register_post.php" & gt; & Lt; Div id = "wrapper" & gt; & Lt; P class = "form-registerUserName" & gt; & Lt; Label = "registerUserName" & gt; Username & lt; / Label & gt; & Lt; span class = "required" & gt; * & Lt; / Span & gt; & Lt; Input id = "registerUserName" type = "text" size = "24" maximum length = "24" value = "& lt ;? php echo $ _SESSION ['registerUserName'] ;? & gt;" Onkeyup = "validateName ()" onblur = "validateName ()" & gt; & Lt; Label class = "hint" = "registerUserName" & gt; Signal error & lt; / Label & gt; & Lt; / Div & gt; & Lt; / P & gt;   

and css

  #wrapper {float: left; } .ht {padding-left: 20px; }   

Hope this helps

Comments

Popular posts from this blog

Pass DB Connection parameters to a Kettle a.k.a PDI table Input step dynamically from Excel -

multithreading - PhantomJS-Node in a for Loop -

c++ - MATLAB .m file to .mex file using Matlab Compiler -