www.webdeveloper.com
Results 1 to 2 of 2

Thread: aligning input fields horizontally

  1. #1
    Join Date
    Sep 2009
    Posts
    15

    aligning input fields horizontally

    Hi.

    I am creating a php form that needs certain input fields aligning next to each other to compress the size of it because it is quite a large form.

    Is there any way you know how to edit the css to make them align next to each other.

    Here is the css:
    Code:
        body {
        font-family:Arial, Tahoma, sans-serif;
    }
    #contact-wrapper {
        width:550px;
        border:1px solid #e2e2e2;
        background:#f1f1f1;
        padding:20px;
    }
    #contact-wrapper div {
        clear:both;
        margin:1em 0;
        height:auto;
    }
    #contact-wrapper label {
        display:block;
        float:none;
        font-size:16px;
        width:auto;
    }
    form#contactform input {
        border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;
        border-style:solid;
        border-width:1px;
        padding:4px;
        font-size:16px;
        color:#333;
    }
    form#contactform textarea {
        font-family:Arial, Tahoma, Helvetica, sans-serif;
        font-size:100%;
        padding:0.6em 0.5em 0.7em;
        border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;
        border-style:solid;
        border-width:1px;
        position:absolute;
    }
    #email{
        float:left;
        width:200px;
        left:0px;
    }
    #telephone{
        float:left;
        display:block;
    }
    #horiinput{
        float:none;
    }
    Here is the html markup for the form;
    HTML Code:
    <div id="contact-wrapper">
    
    <?php if(isset($hasError)) { //If errors are found ?>
        <p class="error">Please check if you've filled all the fields with valid information. Thank you.</p>
    <?php } ?>
    
    <?php if(isset($emailSent) && $emailSent == true) { //If email is sent ?>
        <p><strong>Email Successfully Sent!</strong></p>
        <p>Thank you <strong><?php echo $name;?></strong> for using my contact form! Your email was successfully sent and I will be in touch with you soon.</p>
    <?php } ?>
    
        <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="contactform">
        <div>
            <label for="name"><strong>Full Name:</strong></label>
            <input type="text" size="50" name="contactname" id="contactname" value="" class="required" />
        </div>
    
        <div>
            <label for="company name"><strong>Company Name:</strong></label>
            <input type="text" size="50" name="companyname" id="companyname" value="" class="required" />
        </div>
        <div id="horiinput">
        <div id="email">
            <label for="email"><strong>Email:</strong></label>
            <input type="text" size="20" name="email" id="email" value="" class="required email" />
        </div>
        <div id="telephone">
            <label for="telephone"><strong>Telephone:</strong></label>
            <input type="text" size="25" name="telephone" id="telephone" value="" class="required" />
        </div>
        </div>
        <div>
            <label for="whentocall"><strong>When should we call you?:</strong></label>
            <input type="text" size="25" name="whentocall" id="whentocall" value="" class="required" />
        </div>
        <div>
            <label for="whichplan"><strong>Which plan?:</strong></label>
            <input type="text" size="25" name="whichplan" id="whichplan" value="" class="required" />
        </div>
        <div>
            <label for="whichphone"><strong>Which phone?:</strong></label>
            <input type="text" size="25" name="whichphone" id="whichphone" value="" class="required" />
        </div>
        <div>
            <label for="whatbusiness"><strong>Type of business?:</strong></label>
            <input type="text" size="25" name="whatbusiness" id="whatbusiness" value="" class="required" />
        </div>
        <div>
            <label for="employees"><strong>Number of employees?:</strong></label>
            <input type="text" size="25" name="employees" id="employees" value="" class="required" />
        </div>
        <div>
            <label for="lines"><strong>Existing number of lines?:</strong></label>
            <input type="text" size="25" name="lines" id="lines" value="" class="required" />
        </div>
        <div>
            <label for="extensions"><strong>Existing number of extensions?:</strong></label>
            <input type="text" size="25" name="lines" id="lines" value="" class="required" />
        </div>
        <div>
            <label for="notes"><strong>Comments</strong></label>
            <textarea rows="3" cols="50" name="comments" id="comments" class="required"></textarea>
        </div>
        <input type="submit" value="Send Message" name="submit" />
    </form>
    </div>
    Any help on this would be amazing thanks,

    Mark

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    This is probably all the css you need
    Code:
    body {
        font-family:Arial, Tahoma, sans-serif;
    }
    #contact-wrapper {
        width:550px;
        overflow:hidden;
        border:1px solid #e2e2e2;
        background:#f1f1f1;
        padding:20px;
    }
    #contact-wrapper div {
        float:left;
        margin:1em;
    }
    #contact-wrapper label {
        display:block;
        font-size:16px;
    }
    #contactform input {
        border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;
        border-style:solid;
        border-width:1px;
        padding:4px;
        font-size:16px;
        color:#333;
    }
    #contactform textarea {
        font-family:Arial, Tahoma, Helvetica, sans-serif;
        font-size:100&#37;;
        padding:0.6em 0.5em 0.7em;
        border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;
        border-style:solid;
        border-width:1px;
    }
    At least 98% of internet users' DNA is identical to that of chimpanzees

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles