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; }