Below are some of the fields on my Registration Form.
The Location field is okay as is, and is a block item with the label on top.
However, I would like to place the fields CITY, STATE, ZIP on a new line, with each side-by-side, and I would like the label for each respective field to be on top of the field.
Here is a snippet of my code…
<!-- CREATE ACCOUNT FORM -->
<form id="createAccount" action="" method="post">
<fieldset>
<legend>Create a Member Account</legend>
<!-- TEST Location -->
<label for="location">Location:</label>
<input id="location" name="location" type="text" maxlength="80" value="" />
<br />
<!-- TEST City -->
<label for="city">City:</label>
<input id="city" name="city" type="text" maxlength="80" value="" />
<br />
<!-- TEST State -->
<label for="state">State:</label>
<input id="state" name="state" type="text" maxlength="80" value="" />
<br />
<!-- Submit Form -->
<input type="submit" name="createAccount" class="button" value="Create Account"/>
</fieldset>
</form>
/***************/
/* FORM Styles */
/***************/
#createAccount{
width: 640px;
margin: 0 auto;
padding: 30px 0 30px 0;
}
#createAccount fieldset{
padding: 0 2em 2em 4em;
}
form label{
display: block; /* Force label onto its own line. */
padding: 1.5em 0 0 0;
font-weight: bold;
}
form input#city,
form input#state{
width: 10em;
}
Here is a screen-shot of what I currently have. I like the way Location looks, but I want City, State, and eventually Zip to be side by side.
It seems like maybe I need Inline-Block, but I’m not sure, and I’m especially confused how to keep the Labels on Top, but the Inputs Side-by-Side.
I’d just place all the labels in a row, with them all floated, and then clear:both; the inputs. They should automatically sit side-by-side. So the HTML would be basically like this. I’ll let you sort out the CSS.
[LEFT][COLOR=#FF8000]<form id=[/COLOR][COLOR=#0000FF]"createAccount"[/COLOR][COLOR=#FF8000] action=[/COLOR][COLOR=#0000FF]""[/COLOR][COLOR=#FF8000] method=[/COLOR][COLOR=#0000FF]"post"[/COLOR][COLOR=#FF8000]>[/COLOR][/LEFT]
[COLOR=#FF8000]<fieldset>
[/COLOR][COLOR=#464646] [/COLOR][COLOR=#FF8000]<legend>[/COLOR][COLOR=#464646]Create a Member Account[/COLOR][COLOR=#FF8000]</legend>
[/COLOR][COLOR=#464646] [/COLOR][I][COLOR=#000080]<!-- TEST Location -->
[/COLOR][/I][COLOR=#464646] [/COLOR][COLOR=#FF8000]<label for=[COLOR=#0000FF]"location"[/COLOR]>[/COLOR][COLOR=#464646]Location:[/COLOR][COLOR=#FF8000]</label>
[/COLOR][I][COLOR=#000080] <!-- TEST State -->[/COLOR][/I]
[COLOR=#FF8000]<label for=[COLOR=#0000FF]"state"[/COLOR]>[/COLOR][COLOR=#464646]State:[/COLOR][COLOR=#FF8000]</label>
[/COLOR][I][COLOR=#000080] <!-- TEST City -->[/COLOR][/I]
[COLOR=#FF8000]<label for=[COLOR=#0000FF]"city"[/COLOR]>[/COLOR][COLOR=#464646]City:[/COLOR][COLOR=#FF8000]</label>[/COLOR][COLOR=#464646]
[/COLOR][COLOR=#FF8000]<input id=[COLOR=#0000FF]"location"[/COLOR] name=[COLOR=#0000FF]"location"[/COLOR] type=[COLOR=#0000FF]"text"[/COLOR] maxlength=[COLOR=#0000FF]"80"[/COLOR] value=[COLOR=#0000FF]""[/COLOR] />
[/COLOR][COLOR=#464646] [/COLOR][COLOR=#FF8000]<input id=[COLOR=#0000FF]"city"[/COLOR] name=[COLOR=#0000FF]"city"[/COLOR] type=[COLOR=#0000FF]"text"[/COLOR] maxlength=[COLOR=#0000FF]"80"[/COLOR] value=[COLOR=#0000FF]""[/COLOR] />[/COLOR][COLOR=#464646]
[/COLOR][COLOR=#FF8000]<input id=[COLOR=#0000FF]"state"[/COLOR] name=[COLOR=#0000FF]"state"[/COLOR] type=[COLOR=#0000FF]"text"[/COLOR] maxlength=[COLOR=#0000FF]"80"[/COLOR] value=[COLOR=#0000FF]""[/COLOR] />
[/COLOR][COLOR=#464646]
[/COLOR][I][COLOR=#000080]<!-- Submit Form -->[/COLOR][/I][COLOR=#464646]
[/COLOR][COLOR=#FF8000]<input type=[COLOR=#0000FF]"submit"[/COLOR] name=[COLOR=#0000FF]"createAccount"[/COLOR] class=[COLOR=#0000FF]"button"[/COLOR] value=[COLOR=#0000FF]"Create Account"[/COLOR]/>
[/COLOR][COLOR=#464646] [/COLOR][COLOR=#FF8000]</fieldset>
[/COLOR][COLOR=#464646] [/COLOR][COLOR=#FF8000]</form>[/COLOR]
As you now effectively have blocks with one two or three rows then there is not one single rule that will align them as you want because its either all or nothing (unless you use vertical-align:middle but then they won’t sit in the base line). Therefore you will just have to adjust the odd one out manually to fit. I would use relative positioning and just move it down without changing the flow of the document. Don’t change the vertical-alignment from what it was as that will just complicate things.
#or{position:relative;top:2.8em}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
/***************/
/* FORM Styles */
/***************/
#createAccount {
width: 640px;
margin: 0 auto;
padding: 30px 0 30px 0;
}
#createAccount fieldset { padding: 0 2em 2em 4em; }
form label {
display: block; /* Force label onto its own line. */
padding: 1.5em 0 0 0;
font-weight: bold;
}
form input#city, form input#state { width: 10em; }
#createAccount span{display:inline-block;margin:0 10px 10px 0;vertical-align:top}
.button{display:block}
#createAccount .error {display:block}
#or{position:relative;top:2.8em}
</style>
</head>
<body>
<!-- CREATE ACCOUNT FORM -->
<form id="createAccount" action="" method="post">
<fieldset>
<legend>Create a Member Account</legend>
<!-- TEST Location -->
<span>
<label for="location">Location:</label>
<input id="location" name="location" type="text" maxlength="80" value="" />
<span class="error">Error message goes here</span>
</span>
<!-- TEST City -->
<span>
<label for="city">City:</label>
<input id="city" name="city" type="text" maxlength="80" value="" />
</span>
<span id="or">Or</span>
<!-- TEST State -->
<span>
<label for="state">State:</label>
<input id="state" name="state" type="text" maxlength="80" value="" />
</span>
<!-- Submit Form -->
<input type="submit" name="createAccount" class="button" value="Create Account"/>
</fieldset>
</form>
</body>
</html>
I used position:relative because it will have nil effect on the other elements. If you add too much padding and that element becomes taller then there’s a danger that the vertical alignment of the whole row will change. The vertical alignment is created by the largest element in that section. As everything else was lined up it seemed sensible not to upset the cart and just move the one element that needed it without ever impacting on any of the other elements in the row.
However in this instance padding should be ok because the element will still be smaller than the other blocks.