Need help with form CSS

[auxano]

URL: http://tinyurl.com/2b3be44

I am really struggling with the form you see in the left sidebar. I need the labels (Name, Email, Phone) to be on the left and the input fields on the right. I need the input fields to line up evenly along their right sides, too.

Here's how it should look:



I will appreciate any help.

[Stevie D]

Your best plan is to give the labels and inputs a display:inline-block. This will allow them to sit side-by-side on the same row, and then you can set the widths of them to be the same - and you can set the width on the heading and the message box to be the sum of the label width and the input width.

[auxano]

I completely forgot about display: inline-block. Thank you SOO much! You're a life saver!!!

[RyanReese]

Since you went the display:inline-block with the lables and input, make sure you account for fixes

Inputs are replaced inline already and act like display:inline-block already, no worries there, however the label will need an IE6/7 hack since it's a display:block by defualt

Target the labels via CSS (IE6 Star selector hack * html) and for IE7 (*+ html) and set the labels to display:inline

FF2 will also need display:-moz-inline-box; set for the labels/inputs

[beebs93]

I had the same problem and got around the display:inline-block issue as follows:

Source: http://nupper.heliohost.org/the_clay_guys/contact.php

HTML:

<div id="fields">
    <p>First Name:</p>
    <p>Last Name:</p>
    <p>E-Mail:</p>
    <p>Message:</p>
<!-- End FIELDS 'div' --> </div>
 
<div id="form">
    <form action="" method="post">
        <p><input type="text" name="fn" .../></p>
 
        <p><input type="text" name="ln" .../></p>
 
        <p><input type="text" name="e" .../></p>
 
        <p><textarea name="m" ...></p>
 
        <p><input type="hidden" name="submitted" value="TRUE" />
        <input type="submit" name="submitButton".../></p>
    </form>
<!-- End FORM 'div' --> </div>

And the CSS:

#fields {
	margin:0 1px 0 0;
	padding:0 4px 0 0;
	float:left;
	line-height:1.57em;
}
 
#fields p, #form p {
	margin:0 0 1px 1px;
	padding:0 0 4px 19px;
}
 
input, textarea {
	padding:3px;
	border:none;
	font-family:'Arial', 'Tahoma', sans-serif;
	font-size:0.813em;
}
 
textarea {
	height:110px;
	max-height:110px;
	width:425px;
	max-width:425px;
	overflow:auto;
}
 
#submitButton {
	height:60px;
	width:130px;
	margin:0 auto 5px;
	padding:0;
	border:0;
	display:block;
	background:url('../images/send.png') no-repeat 0 0 transparent;
	overflow:hidden;
	text-indent:-999px;
	font-size:0;
	line-height:0;
	text-align:center;
}
 
#submitButton:hover {
	background:url('../images/send.png') no-repeat 0 -60px transparent;
	cursor:pointer;
}

If you do decide to go the display:inline-block route make sure you follow what Ryan said vis-a-vis the fixes. Before I knew that bug I drove myself batty trying to figure it out.