[RESOLVED] CSS Tableless Form

**agmorgan** · Oct 12th, 2005, 06:56 AM

I'm trying to make a feedback form using CSS instead of tables.
It works fine with a label and an input box. i.e. just 2 columns
I come unstuck when I try to add an extra box on the right to make 3 columns. (<DIV ID="help">)
I can't seem to align it correctly or size it correctly.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML> 
  <HEAD> 
	 <TITLE>Test CSS Form</TITLE> 
	 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> 
	 <STYLE TYPE="text/css">
<!--
#FormInterest label,#FormInterest input {
	display: block;
	width: 150px;
	float: left;
	margin-bottom: 10px;
}

#FormInterest label {
	text-align: left;
	width: 200px;
	padding-right: 20px;
}
#FormInterest br {
	clear: left;
}

#FormInterest  form {
  	border : 1px solid #000;
  	padding : 5px;
	background-color : #ffc;  
}
#help{
	width: 150px;
	float: right;
  	border : 1px solid #000;
  	padding : 5px;
	background-color : white;  	
}
-->
</STYLE> 
  </HEAD> 
  <BODY> 
	 <P CLASS="smltxt"> &gt; <B>Register your interest</B></P> 
	 <P>Please use the comments box to provide your views or to register an interest in being kept informed of developments.</P> 
	 <DIV ID="FormInterest">
		<FORM METHOD="POST" ACTION="/cgi-bin/genform.pl"> 
		  <INPUT TYPE="HIDDEN" NAME="form_owner" VALUE="[email protected]"> 
		  <INPUT TYPE="hidden" NAME="form_subject" VALUE="Interest Form"> 
		  <BR>
		  <LABEL FOR="name">Name</LABEL> 
		  <INPUT NAME="name" ID="name"><BR>
		  <LABEL FOR="company">Organisation</LABEL> 
		  <INPUT NAME="company" ID="company"><BR>
		  <LABEL FOR="email">E-mail / Telephone</LABEL> 
		  <INPUT NAME="email" ID="email"><BR>
		  <LABEL FOR="interest">Interest Area</LABEL> 
		  <SELECT NAME="interest" SIZE="1" ID="interest"> 
			 <OPTION VALUE="Communications">Communications</OPTION> 
			 <OPTION VALUE="Healthcare">Healthcare</OPTION> 
			 <OPTION VALUE="Electronics">Electronics</OPTION> 
			 <OPTION VALUE="Instrumentation">Instrumentation</OPTION> 
			 <OPTION VALUE="Sensing">Sensing</OPTION> 
			 <OPTION VALUE="Process control">Process control</OPTION> 
			 <OPTION VALUE="Defence">Defence</OPTION> 
			 <OPTION VALUE="Security">Security</OPTION> 
			 <OPTION VALUE="Energy">Energy</OPTION> 
			 <OPTION VALUE="Transport">Transport</OPTION> 
			 <OPTION VALUE="Other">Other</OPTION> 
		  </SELECT><BR>
		  <LABEL FOR="companyinterest">Organisation Interest Area</LABEL> 
		  <SELECT NAME="companyinterest" SIZE="1" ID="companyinterest"> 
			 <OPTION VALUE="Communications">Communications</OPTION> 
			 <OPTION VALUE="Healthcare">Healthcare</OPTION> 
			 <OPTION VALUE="Electronics">Electronics</OPTION> 
			 <OPTION VALUE="Instrumentation">Instrumentation</OPTION> 
			 <OPTION VALUE="Sensing">Sensing</OPTION> 
			 <OPTION VALUE="Process control">Process control</OPTION> 
			 <OPTION VALUE="Defence">Defence</OPTION> 
			 <OPTION VALUE="Security">Security</OPTION> 
			 <OPTION VALUE="Energy">Energy</OPTION> 
			 <OPTION VALUE="Transport">Transport</OPTION> 
			 <OPTION VALUE="Other">Other</OPTION> 
		  </SELECT><BR>
		  <H1>Objectives</H1> <LABEL FOR="outcome">What is the desired outcome? </LABEL> <TEXTAREA NAME="outcome" ROWS="6" COLS="42" ID="outcome"></TEXTAREA>
		  <DIV ID="help">
			 In the Objectives box please identify your new requirements and what you would like as the outcome of the work, that is, what might be physically produced or what might be achieved. 
		  </DIV><BR>
		  <H1>Impact</H1> <LABEL FOR="important">Why is it important?</LABEL> <TEXTAREA NAME="important" ROWS="6" COLS="42" ID="important"></TEXTAREA><BR>
		  <LABEL FOR="benefit">What is the benefit to UK and who would benefit from this work?</LABEL> <TEXTAREA NAME="benefit" ROWS="6" COLS="42" ID="benefit"></TEXTAREA><BR>
		  <LABEL FOR="collaborations">Collaboration Options</LABEL> 
		  <SELECT NAME="collaborations" SIZE="1" ID="collaborations"> 
			 <OPTION VALUE="Yes">Yes</OPTION> 
			 <OPTION VALUE="No">No</OPTION> 
			 <OPTION VALUE="Maybe">Maybe</OPTION> 
			 <OPTION VALUE="No Comment">No Comment</OPTION> 
		  </SELECT><BR>
		  <INPUT TYPE="SUBMIT" VALUE="Submit Interest" NAME="Submit1" ID="Submit1"> 
		  <INPUT TYPE="RESET" NAME="Reset1" VALUE="Clear Form" ID="Reset1"><BR>
		</FORM> 
	 </DIV> </BODY>
</HTML>

Thread: [RESOLVED] CSS Tableless Form

Thread Tools

Display

Threaded View

[RESOLVED] CSS Tableless Form

Posting Permissions