Side-by-Side Fields with Top Labels

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.

Help needed!

Thanks,

Debbie

If you want it to be like…

label label label
input input input

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]

Hi,

I’d wrap them as pairs and float them side by side or better still use inline-block to avoid float snagging.


<!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}
.button{display:block}

</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>
				
				<!-- TEST City -->
				<span>
				<label for="city">City:</label>
				<input id="city" name="city" type="text" maxlength="80" value="" />
				</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 just added a span around each label and input pair and the applied these extra rules:


#createAccount span{display:inline-block;margin:0 10px 10px 0}
.button{display:block}

Paul O’B,

That was easy!!

Thanks Paul!! :slight_smile:

BTW, here is what it looks like now…

Any thoughts on how it looks?

Is there anything I could do to improve the look of my State Drop-down?

Debbie

Paul,

Looks like I spoke too soon!

I could use some help on how to properly lay out my error messages.

Here is what I have when the User fills out the field incorrectly…

And here is a snippet of my code…


	<!-- Location -->
	<span>
		<label for="location">Location:</label>
		<input id="location" name="location" type="text" maxlength="40" value="" />
		<br />
		<?php
			if (!empty($errors['location'])){
				echo '<span class="error">' . $errors['location'] . '</span>';
			}
		?>
	</span>

	<span>OR</span>

	<!-- City -->
	<span>
		<label for="city">City:</label>
		<input id="city" name="city" type="text" maxlength="30" value="" />
	</span>

	<!-- State -->
	<span>
		<label for="state">State:</label>
			<select id="state" name="state">
				<option value="">--</option>
				<option value="AL">AL</option>
				<option value="AK">AK</option>
				<option value="AZ">AZ</option>

As you can see, when an error occurs, it is messing up the vertical alignment for the corresponding fields.

It almost looks like if I could just “Top Align” what is inside the <span>'s you added, then things would be fine.

Thanks,

Debbie

HI,

This is where inline-block becomes useful as you just vertically align it to the top:


#createAccount span{display:inline-block;margin:0 10px 10px 0[B];vertical-align:top[/B]}


Closer… :wink:

Okay, so that solved one problem but created another.

Now my “OR” shifted out of where it need to be…

I changed my code to this…


	<!-- Location -->
	<span>
		<label for="location">Location:</label>
		<input id="location" name="location" type="text" maxlength="40" value="" />
		<br />
		<?php
			if (!empty($errors['location'])){
				echo '<span class="error">' . $errors['location'] . '</span>';
			}
		?>
	</span>

	<span id="or">OR</span>

	<!-- City -->
	<span>
		<label for="city">City:</label>
		<input id="city" name="city" type="text" maxlength="30" value="" />
	</span>

And then tried these styles…

vertical-align: bottom

and

vertical-align: middle

but no luck!!

I would like the word “OR” to be inline with the Input Boxes themselves…

Can I used Top Alignment and maybe add Padding?

Debbie

This seems to work, but maybe there is a better way??

#createAccount span#or{
	padding: 3em 0 0 0;
	vertical-align: top;
}

Debbie

Hi,

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>

Paul,

Can’t I just use Padding like I did above?

It seems to work just fine.

Or is there more to it than that?

Debbie

Padding should be ok in this instance.

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.

You’re the best!!! :slight_smile:

Thanks,

Debbie