aligning input fields horizontally

[markdunbavan]

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:

    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;

<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

[Fang]

This is probably all the css you need

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%;
    padding:0.6em 0.5em 0.7em;
    border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;
    border-style:solid;
    border-width:1px;
}