View Full Version : Resolved form layout

12-15-2010, 10:42 PM
I have a long form that I want to give a layout rather than have it all in one column. But I cant seem to do it, should I use tables for layout? What I want is two columns to add bits of the form to.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>Volunteering Form</title>
<link href="styles/layout.css" rel="stylesheet" type="text/css" />
<link href="styles/mainstyle.css" rel="stylesheet" type="text/css" />
<div id="container">
<div id="header">
<div id="left_header"><h1 id="logo"><a href="" title="Lee Oasis Furniture Project"><em title="Lee Oasis Home Page"></em>Lee Oasis Furniture Project</a></h1>
<div id="right_header">
<p class="logtitle">Recycle and donate<br />unwanted furniture<br/>Tel: 020 8857
0043<br /><span class="caps">Lewisham Area</span></p></div><!--right_header-->
<div class="clear"></div><!--clear-->
<div id="nav"><a id="top"></a>

<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="dropin.html">Drop-in</a></li>
<li><a href="furniture.html">Furniture Project</a></li>
<li class="current"><a href="volunteer.html">Volunteer</a></li>
<li><a href="news.html">News/Events</a></li>
<li id="last"><a href="appeals.html">Appeals</a></li>
<div class="textbox_outer">
<div class="textbox_inner">
<div id="formdiv">
<div id="formlside">
<form action="mailto:" method="POST" enctype="multipart/form-data" name="form_to_email">
<p><label>Your Name:</label><br />
<input type="text" size="30" name="name" /><br />
<label>Your Address:</label><br />
<textarea name="address" rows="5" cols="30">
</textarea><br /></p>
<div id="formrside"><p><label>Telephone:</label><br />
<input type="text" size="30" name="telephone" /><br /><br />
<label>Email:</label><br />
<input type="text" size="30" name="email" /><br /><br />
<label>What would you like to do/skills offered:</label><br />
<textarea name="skills" rows="5" cols="30">
<p>How much time do you have available?<br />
<label>Hours per week/month?</label><br />
<input type="text" size="30" name="time" /><br /><br />
<label>On Occassional Basis?</label><br />
<input type="text" size="30" name="occassional" /></p>
<p>I understand the general policy of Lee Oasis and agree with its aims and
ethos. I have also read the relevant Health and Safety and/or Child Protection
Policy as it applies to me; and agree to abide by it.</p>
<p><label>Signed (Add name and submit form):</label>
<input type="text" size="30" name="signed" /><br /><br />
<input type="text" size="30" name="date" /><br /><br />
<input type="submit" value="email_form" /></p>
<img alt="arrow up icon image" height="14" src="images/arrow_up.jpg" width="11" /> <a href="#top">Top</a>

<div class="clear"></div><!--cleardiv-->
<div id="footer">

I just have this css but it is not making two columns.

#formdiv {width: 80%; float:left; display:inline;}
#formlside {width: 40%; float:left; display:inline;}
#formrside {margin-left: 400px; float:right;}

I want the form to be as accessible and semantic as possible