Problems floating items on form

HTML & CSS
1

I’m having problems getting input and select items in a form to line up vertically and float correctly. I’m making the form 800px and I’m guessing that I will need a clear after each line of floated items? Any help would be appreciated.

Thanks,
jodmcc

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<meta name="generator" content="Adobe GoLive">
		<title>Hillman Foods - Contact Us</title>
		
	</head>

	<body>
	<div id="navigation">
			<img id="logo" src="images/logo.gif" alt="" height="165" width="388" border="0"><img src="images/location_contact_on.gif" alt="" name="homedefault" height="62" width="402" border="0"><a onclick="CSAction(new Array(/*CMP*/'C77B46FF10'));return CSClickReturn()" onmouseover="CSAction(new Array(/*CMP*/'C773F5560'));return true;" onmouseout="CSAction(new Array(/*CMP*/'C773F5CF1'));" href="#" csclick="C77B46FF10" csout="C773F5CF1" csover="C773F5560"><img id="nav_01" src="images/home.gif" alt="" height="40" width="40" border="0"></a><a onclick="CSAction(new Array(/*CMP*/'C77B472511'));return CSClickReturn()" onmouseover="CSAction(new Array(/*CMP*/'C773F6282'));return true;" onmouseout="CSAction(new Array(/*CMP*/'C773F64D3'));" href="#" csclick="C77B472511" csout="C773F64D3" csover="C773F6282"><img id="nav_02" src="images/arrow.gif" alt="" height="40" width="40" border="0"></a><a onclick="CSAction(new Array(/*CMP*/'C77B474312'));return CSClickReturn()" onmouseover="CSAction(new Array(/*CMP*/'C773F66F4'));return true;" onmouseout="CSAction(new Array(/*CMP*/'C773F6885'));" href="#" csclick="C77B474312" csout="C773F6885" csover="C773F66F4"><img id="nav_03" src="images/burger_flip.gif" alt="" height="40" width="40" border="0"></a><a onclick="CSAction(new Array(/*CMP*/'C77B477213'));return CSClickReturn()" onmouseover="CSAction(new Array(/*CMP*/'C773F69E6'));return true;" onmouseout="CSAction(new Array(/*CMP*/'C773F6B27'));" href="#" csclick="C77B477213" csout="C773F6B27" csover="C773F69E6"><img id="nav_04" src="images/envelope_on.gif" alt="" height="40" width="40" border="0"></a><a onclick="CSAction(new Array(/*CMP*/'C77B479414'));return CSClickReturn()" onmouseover="CSAction(new Array(/*CMP*/'C773F6C38'));return true;" onmouseout="CSAction(new Array(/*CMP*/'C773F6D39'));" href="#" csclick="C77B479414" csout="C773F6D39" csover="C773F6C38"><img id="nav_05" src="images/key.gif" alt="" height="40" width="40" border="0"></a></div>
		<div id="feedbackform"><form id="feedback" action="" method="get" name="feedback">
				<h1>Hillman Foods Inc. Contact Us</h1>
				<h5>Contact Information: (Please fill in all fields marked with "*")</h5>
				<label for="title">Title*:</label><select id="title" name="title" size="1">
					<option value="Select">Select</option>
					<option value="Dr.">Dr.</option>
					<option value="Rev.">Rev.</option>
					<option value="Mr.">Mr.</option>
					<option value="Mrs.">Mrs.</option>
					<option value="Miss">Miss</option>
				</select>
				<label for="firstname">First Name *:</label><input id="firstname" name="firstname" class="text" type="text" size="24"><label for="lastname">Last Name *:</label><input id="lastname" name="lastname" class="text" type="text" size="24"><label for="mailingaddress">Mailing Address * (U.S. Only):</label><input id="mailingaddress" name="mailingaddress" class="text" type="text" size="24"><input id="mailingaddress2" name="mailingaddress2" class="text" type="text" size="24"><label for="mailcity">City *:</label><input id="mailcity" name="mailcity" class="text" type="text" size="24"><label for="mailstate">State *:</label><select id="mailstate"  name="mailstate" size="1">
					<option value="Select">Select</option>
					<option value="AL">AL</option>
					<option value="AK">AK</option>
					<option value="AZ">AZ</option>
					<option value="AR">AR</option>
					<option value="CA">CA</option>
					<option value="CO">CO</option>
					<option value="CT">CT</option>
					<option value="DE">DE</option>
					<option value="FL">FL</option>
					<option value="GA">GA</option>
					<option value="HI">HI</option>
					<option value="ID">ID</option>
					<option value="IL">IL</option>
					<option value="IN">IN</option>
					<option value="IA">IA</option>
					<option value="KS">KS</option>
					<option value="KY">KY</option>
					<option value="LA">LA</option>
					<option value="ME">ME</option>
					<option value="MD">MD</option>
					<option value="MA">MA</option>
					<option value="MI">MI</option>
					<option value="MN">MN</option>
					<option value="MS">MS</option>
					<option value="MO">MO</option>
					<option value="MT">MT</option>
					<option value="NE">NE</option>
					<option value="NV">NV</option>
					<option value="NH">NH</option>
					<option value="NJ">NJ</option>
					<option value="NM">NM</option>
					<option value="NY">NY</option>
					<option value="NC">NC</option>
					<option value="ND">ND</option>
					<option value="OH">OH</option>
					<option value="OK">OK</option>
					<option value="OR">OR</option>
					<option value="PA">PA</option>
					<option value="RI">RI</option>
					<option value="SC">SC</option>
					<option value="SD">SD</option>
					<option value="TN">TN</option>
					<option value="TX">TX</option>
					<option value="UT">UT</option>
					<option value="VT">VT</option>
					<option value="VA">VA</option>
					<option value="WA">WA</option>
					<option value="WV">WV</option>
					<option value="WI">WI</option>
					<option value="WY">WY</option>
				</select>
				<label for="mailzip">Zip *:</label><input id="mailzip" name="mailzip" class="text" type="text" size="24"><label for="dayphone">Day Phone *:</label><input id="dayphone" name="dayphone" class="text" type="text" size="3">-<input id="dayphone2" name="dayphone2" class="text" type="text" size="3">-<input id="dayphone3" name="dayphone3" class="text" type="text" size="4"><label for="dayphoneext">Extension:</label><input id="dayphoneext" name="dayphoneext" class="text" type="text" size="5"><label for="eveningphone">Evening Phone *:</label><input id="eveningphone" name="eveningphone" class="text" type="text" size="3">-<input id="eveningphone2" name="eveningphone2" class="text" type="text" size="3">-<input id="eveningphone3" name="eveningphone3" class="text" type="text" size="4"><label for="eveningphoneext">Extension:</label><input id="eveningphoneext" name="eveningphoneext" class="text" type="text" size="5"><label for="timetoreach">Most convenient time/day to reach you by phone:</label><input id="timetoreach" name="timetoreach" class="text" type="text" size="24"><label for="email">Your E-mail Address *:</label><input id="email" name="email" class="text" type="text" size="24"><label for="email2">Re-enter E-mail Address *:</label><input id="email2" name="email2" class="text" type="text" size="24"><h5>Restaurant Visited: (Please fill in all fields)</h5><label for="restaddress">Address *:</label><input id="restaddress" name="restaddress" class="text" type="text" size="24"><label for="restcity">City *:</label><input id="restcity" name="restcity" class="text" type="text" size="24"><label for="reststate">State *:</label><select id="reststate"  name="reststate" size="1">
					<option value="Select">Select</option>
					<option value="AL">AL</option>
					<option value="AK">AK</option>
					<option value="AZ">AZ</option>
					<option value="AR">AR</option>
					<option value="CA">CA</option>
					<option value="CO">CO</option>
					<option value="CT">CT</option>
					<option value="DE">DE</option>
					<option value="FL">FL</option>
					<option value="GA">GA</option>
					<option value="HI">HI</option>
					<option value="ID">ID</option>
					<option value="IL">IL</option>
					<option value="IN">IN</option>
					<option value="IA">IA</option>
					<option value="KS">KS</option>
					<option value="KY">KY</option>
					<option value="LA">LA</option>
					<option value="ME">ME</option>
					<option value="MD">MD</option>
					<option value="MA">MA</option>
					<option value="MI">MI</option>
					<option value="MN">MN</option>
					<option value="MS">MS</option>
					<option value="MO">MO</option>
					<option value="MT">MT</option>
					<option value="NE">NE</option>
					<option value="NV">NV</option>
					<option value="NH">NH</option>
					<option value="NJ">NJ</option>
					<option value="NM">NM</option>
					<option value="NY">NY</option>
					<option value="NC">NC</option>
					<option value="ND">ND</option>
					<option value="OH">OH</option>
					<option value="OK">OK</option>
					<option value="OR">OR</option>
					<option value="PA">PA</option>
					<option value="RI">RI</option>
					<option value="SC">SC</option>
					<option value="SD">SD</option>
					<option value="TN">TN</option>
					<option value="TX">TX</option>
					<option value="UT">UT</option>
					<option value="VT">VT</option>
					<option value="VA">VA</option>
					<option value="WA">WA</option>
					<option value="WV">WV</option>
					<option value="WI">WI</option>
					<option value="WY">WY</option>
				</select>
				<label for="restlandmark">Landmark * (describe location of restaurant):</label><input id="restlandmark" name="restlandmark" class="text" type="text" size="24">
			</form></div>
		<p></p>
	</body>

</html>

CSS:


body   { font-size: small; font-family: Verdana, Arial, sans-serif; font-style: normal; font-variant: normal; font-weight: normal; margin: 0; }
* html body { font-size: x-small; /* for IE5/Win */ f\\ont-size: small; /* for other IE versions */ }
h1 { font-size: 150%; }
h2 { font-size: 130%; }
h3 { font-size: 120%; }
h4 { font-size: 110%; }
h5 { font-size: 100%; }
ul  { list-style-type: square; list-style-position: outside; margin: 0 0 0 20px; padding: 0 }
ul li    { font-size: 100%; padding-bottom: 8px }
.redtext  { color: red }
#navigation  { margin-bottom: 15px; width: 800px; }
#navigation img#logo  { margin-right: 10px; float: left; }
#navigation img#nav_01 { margin-top: 63px; margin-right: 50px; float: left; }
#navigation img#nav_02 { margin-top: 63px; margin-right: 50px; float: left; }
#navigation img#nav_03 { margin-top: 63px; margin-right: 50px; float: left; }
#navigation img#nav_04 { margin-top: 63px; margin-right: 50px; float: left; }
#navigation img#nav_05 { margin-top: 63px }
label   { font-size: 75%; display: block }
form { width: 800px; }
form input, form select { float: left; }
2

Is there any particular reason you are floating those inputs? What layout do you actually want?

Removing form input, form select { float: left; } allows the elements to stack nicely.

3

And this has no bearing whatsoever to the problem but i just noticed you have an empty p after your form…

4

Hi Ralph,

It is a long form. I’m trying to get Title, First and Last on one line, both Address inputs stacked, City, State and Zip on one line, Day Phone and Extension on one line, Evening Phone and Extension on one line. Basically trying to redo a form that was originally done as a table.

5

Should I wrap these items in DIVs? I don’t to create “divitus”. Also, items are not vertically aligning. Any help would be great.

jodmcc

6

Don’t be afraid to use divs. They are meant for dividing up content into logical blocks. Indeed, your page won’t validate in strict mode unless inputs are contained in block-level elements anyway (be it divs or Ps or whatever).

Is something like this what you were aiming for?


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<meta name="generator" content="Adobe GoLive">
		<title>Hillman Foods - Contact Us</title>
		<style type="text/css" media="all">
body   { font-size: small; font-family: Verdana, Arial, sans-serif; font-style: normal; font-variant: normal; font-weight: normal; margin: 0; }
* html body { font-size: x-small; /* for IE5/Win */ f\\ont-size: small; /* for other IE versions */ }
h1 { font-size: 150%; }
h2 { font-size: 130%; }
h3 { font-size: 120%; }
h4 { font-size: 110%; }
h5 { font-size: 100%; }
ul  { list-style-type: square; list-style-position: outside; margin: 0 0 0 20px; padding: 0 }
ul li    { font-size: 100%; padding-bottom: 8px }
.redtext  { color: red }

label   { font-size: 75%; display: block }
form { width: 800px; }
/* form input, form select { float: left; } */


.section, .group {padding-bottom: 20px;}
.section input, .section label, .section select {display:inline;}
.group input, .group label, .group select {display:block;}
</style>
	</head>

	<body>
	
	

<div id="feedbackform">
<form id="feedback" action="" method="get" name="feedback">
<h1>Hillman Foods Inc. Contact Us</h1>
<h5>Contact Information: (Please fill in all fields marked with "*")</h5>

<div class="section">

<label for="title">Title*:</label><select id="title" name="title" size="1">
    <option value="Select">Select</option>
    <option value="Dr.">Dr.</option>
    <option value="Rev.">Rev.</option>
    <option value="Mr.">Mr.</option>
    <option value="Mrs.">Mrs.</option>
    <option value="Miss">Miss</option>
</select>

<label for="firstname">First Name *:</label><input id="firstname" name="firstname" class="text" type="text" size="24"><label for="lastname">Last Name *:</label><input id="lastname" name="lastname" class="text" type="text" size="24">

</div>

<div class="group">
<label for="mailingaddress">Mailing Address * (U.S. Only):</label><input id="mailingaddress" name="mailingaddress" class="text" type="text" size="24"><input id="mailingaddress2" name="mailingaddress2" class="text" type="text" size="24">
</div>

<div class="section">
<label for="mailcity">City *:</label><input id="mailcity" name="mailcity" class="text" type="text" size="24"><label for="mailstate">State *:</label><select id="mailstate"  name="mailstate" size="1">
					<option value="Select">Select</option>
					<option value="AL">AL</option>
					<option value="AK">AK</option>
					<option value="AZ">AZ</option>
					<option value="AR">AR</option>
					<option value="CA">CA</option>
					<option value="CO">CO</option>
					<option value="CT">CT</option>
					<option value="DE">DE</option>
					<option value="FL">FL</option>
					<option value="GA">GA</option>
					<option value="HI">HI</option>
					<option value="ID">ID</option>
					<option value="IL">IL</option>
					<option value="IN">IN</option>
					<option value="IA">IA</option>
					<option value="KS">KS</option>
					<option value="KY">KY</option>
					<option value="LA">LA</option>
					<option value="ME">ME</option>
					<option value="MD">MD</option>
					<option value="MA">MA</option>
					<option value="MI">MI</option>
					<option value="MN">MN</option>
					<option value="MS">MS</option>
					<option value="MO">MO</option>
					<option value="MT">MT</option>
					<option value="NE">NE</option>
					<option value="NV">NV</option>
					<option value="NH">NH</option>
					<option value="NJ">NJ</option>
					<option value="NM">NM</option>
					<option value="NY">NY</option>
					<option value="NC">NC</option>
					<option value="ND">ND</option>
					<option value="OH">OH</option>
					<option value="OK">OK</option>
					<option value="OR">OR</option>
					<option value="PA">PA</option>
					<option value="RI">RI</option>
					<option value="SC">SC</option>
					<option value="SD">SD</option>
					<option value="TN">TN</option>
					<option value="TX">TX</option>
					<option value="UT">UT</option>
					<option value="VT">VT</option>
					<option value="VA">VA</option>
					<option value="WA">WA</option>
					<option value="WV">WV</option>
					<option value="WI">WI</option>
					<option value="WY">WY</option>
				</select>
				<label for="mailzip">Zip *:</label><input id="mailzip" name="mailzip" class="text" type="text" size="24">
</div>

<div class="section">
<label for="dayphone">Day Phone *:</label><input id="dayphone" name="dayphone" class="text" type="text" size="3">-<input id="dayphone2" name="dayphone2" class="text" type="text" size="3">-<input id="dayphone3" name="dayphone3" class="text" type="text" size="4"><label for="dayphoneext">Extension:</label><input id="dayphoneext" name="dayphoneext" class="text" type="text" size="5">
</div>

<div class="section">
<label for="eveningphone">Evening Phone *:</label><input id="eveningphone" name="eveningphone" class="text" type="text" size="3">-<input id="eveningphone2" name="eveningphone2" class="text" type="text" size="3">-<input id="eveningphone3" name="eveningphone3" class="text" type="text" size="4"><label for="eveningphoneext">Extension:</label><input id="eveningphoneext" name="eveningphoneext" class="text" type="text" size="5">
</div>

<div class="section">
<label for="timetoreach">Most convenient time/day to reach you by phone:</label><input id="timetoreach" name="timetoreach" class="text" type="text" size="24">
</div>

<div class="section">
<label for="email">Your E-mail Address *:</label><input id="email" name="email" class="text" type="text" size="24">
</div>

<div class="section">
<label for="email2">Re-enter E-mail Address *:</label><input id="email2" name="email2" class="text" type="text" size="24">
</div>


<h5>Restaurant Visited: (Please fill in all fields)</h5>

<label for="restaddress">Address *:</label><input id="restaddress" name="restaddress" class="text" type="text" size="24"><label for="restcity">City *:</label><input id="restcity" name="restcity" class="text" type="text" size="24"><label for="reststate">State *:</label><select id="reststate"  name="reststate" size="1">
					<option value="Select">Select</option>
					<option value="AL">AL</option>
					<option value="AK">AK</option>
					<option value="AZ">AZ</option>
					<option value="AR">AR</option>
					<option value="CA">CA</option>
					<option value="CO">CO</option>
					<option value="CT">CT</option>
					<option value="DE">DE</option>
					<option value="FL">FL</option>
					<option value="GA">GA</option>
					<option value="HI">HI</option>
					<option value="ID">ID</option>
					<option value="IL">IL</option>
					<option value="IN">IN</option>
					<option value="IA">IA</option>
					<option value="KS">KS</option>
					<option value="KY">KY</option>
					<option value="LA">LA</option>
					<option value="ME">ME</option>
					<option value="MD">MD</option>
					<option value="MA">MA</option>
					<option value="MI">MI</option>
					<option value="MN">MN</option>
					<option value="MS">MS</option>
					<option value="MO">MO</option>
					<option value="MT">MT</option>
					<option value="NE">NE</option>
					<option value="NV">NV</option>
					<option value="NH">NH</option>
					<option value="NJ">NJ</option>
					<option value="NM">NM</option>
					<option value="NY">NY</option>
					<option value="NC">NC</option>
					<option value="ND">ND</option>
					<option value="OH">OH</option>
					<option value="OK">OK</option>
					<option value="OR">OR</option>
					<option value="PA">PA</option>
					<option value="RI">RI</option>
					<option value="SC">SC</option>
					<option value="SD">SD</option>
					<option value="TN">TN</option>
					<option value="TX">TX</option>
					<option value="UT">UT</option>
					<option value="VT">VT</option>
					<option value="VA">VA</option>
					<option value="WA">WA</option>
					<option value="WV">WV</option>
					<option value="WI">WI</option>
					<option value="WY">WY</option>
				</select>
				<label for="restlandmark">Landmark * (describe location of restaurant):</label><input id="restlandmark" name="restlandmark" class="text" type="text" size="24">
			</form></div>
		<p></p>
	</body>

</html>
7

To add a bit, forms by nature are not so easy to style. The best way usually is to provide ‘hooks’ for the styling, meaning dividing parts of the form in divs so they can serve as hooks for the css and using classes to style separate elements. And using a reset for forms to try to get the same look x-browser.

8

Thanks Ralph,

That’s looking like what I was going for. I’m going to take a look at what you did since I do want to learn and not have to ask so many questions. I was hesitant to use all the DIVs because of all the flack about using too many of them. This CSS is still somewhat hard to wrap my head around, even after getting numerous books, i.e., Eric Meyer, Dan Cedarholm just to name a few.

jodmcc :slight_smile:

9

What I did was very simple, and not necessarily the best way to go about it, but pretty reliable. I just wrapped a div around various items and set a few simple rules for them, so it shouldn’t be hard to follow.

You’ll no doubt want to add some more styling, such as padding on the lables and inputs, but I thought it was best to see if this was what you wanted before going further. :slight_smile: