SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict AdRock952's Avatar
    Join Date
    Aug 2006
    0 Post(s)
    0 Thread(s)

    Aligning labels next to input boxes

    I have got some labels next to some input boxes on both the left and right hand side but i am having problems lining them up correctly

    You can see it here

    Here is the form

    HTML Code:
    <legend>About You</legend>
    	<p><label for="first_name">Forename:</label>
    	<input type="text" title="Please enter your first name" id="first_name" name="first_name" size="30" value="" class="validate required first_name first_name_msg" /><label id="first_name_msg" class="valid">Required</label></p>
    	<p><label for="last_name">Surname:</label>
    	<input type="text" title="Please enter your last name" id="last_name" name="last_name" size="30" value="" class="validate required last_name last_name_msg" /><label id="last_name_msg" class="valid">Required</label></p>
    	<p><label for="last_name">House Name/No. :</label>
    	<input type="text" title="Please enter your last name" id="houseno" name="houseno" size="30" value="" class="validate required houseno houseno_msg" /><label id="houseno_msg" class="valid">Required</label></p>
    	<p><label for="last_name">Street:</label>
    	<input type="text" title="Please enter your last name" id="street" name="street" size="30" value="" class="validate notrequired street street_msg" /><label id="street_msg" class="valid"></label></p>
    	<p><label for="last_name">Town/City:</label>
    	<input type="text" title="Please enter your last name" id="town" name="town" size="30" value="" class="validate required town town_msg" /><label id="town_msg" class="valid">Required</label></p>
    	<p><label for="last_name">County:</label>
    	<input type="text" title="Please enter your last name" id="county" name="county" size="30" value="" class="validate notrequired county county_msg" /><label id="county_msg" class="valid"></label></p>
    	<p><label for="postcode">Postcode:</label>
    	<input type="text" title="Please enter your last name" id="postcode" name="postcode" size="30" value="" class="validate required postcode postcode_msg" /><label id="postcode_msg" class="valid">Required</label></p>
    	<p><label for="telephone">Telephone:</label>
    	<input type="text" title="Please enter your last name" id="telephone" name="telephone" size="30" value="" class="validate required telephone telephone_msg" /><label id="telephone_msg" class="valid">Required</label></p>
    	<p class="hint">Please enter a valid email address for yourself.</p>
    	<p><label for="email">Email:</label>
    	<input type="text" title="Please enter your email address" id="email1" name="email1" size="30" value="" class="validate required email1 email1_msg" /><label id="email1_msg" class="valid">Required</label></p>
    	<p><label for="email">Confirm Email:</label>
    	<input type="text" title="Please enter your email address" id="email2" name="email2" size="30" value="" class="validate required email2 email2_msg" /><label id="email2_msg" class="valid">Required</label></p>
    and the css

    #form1 label {
       width: 130px;
       font-family: arial, verdana, sans-serif;
       float: left;
       text-align: right;
       margin-right: 0.5em;
       display: block;
    #form1 label.valid {
       width: 120px;
       font-family: arial, verdana, sans-serif;
       font-size: 9pt;
       float: right;
       text-align: left;
       padding-left: 0.5em;

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Hampshire UK
    183 Post(s)
    6 Thread(s)

    Because the input comes before the right float in the html then that means the right float will start on a new line and the "required" text will be underneath on a new line. Floats must come first in the html when you want static content alongside.

    You would either need to float the input to the left also or move the right floated text (and label tags) before the input in the html.

    If you decide to float the input as well then all elements will be floated and you will need to ensure that each row starts on a new line by setting the p element to clear:both or perhaps even floating the p element also.

    Hope that helps (back tomorrow).


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts