CSS forms

I can't seem to get my CSS form to look the way I want it to. I've validated the CSS and XHTML and still have not found why I am getting this undesired behavior. Here is the code for the form page and the external style sheet used


<!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" lang="en" xml:lang="en">


<head>

  <title>Javajam Coffee House - Jobs</title>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

  <link href="javajam.css" rel="stylesheet" type="text/css" />

</head>


<body>


  <div id="container">

  

    <div id="logo">

      <img src="javalogo.gif" width="100%" height="150" alt="JavaJam Coffee House" />

    </div>

	

    <div id="nav">

	  <ul>

	    <li><a href="index.html">Home</a></li>

	    <li><a href="menu.html">Menu</a></li>

	    <li><a href="music.html">Music</a></li>

	    <li><a href="jobs.html">Jobs</a></li>

      </ul>

    </div>

	

    <div id="content">

	

	  <p>Want to work at JavaJam? Fill out the form below to start your application.</p>

	  

	  <form method="post" action="http://webdevfoundations.net/scripts/javajam.asp">

	   

	    <div class="myRow">

		  <label class="labelCol" for="myName">Name:</label>

		  <input type="text" name="myName" id="myName" />

		</div>

		

		<div class="myRow">

		  <label class="labelCol" for="myEmail">E-mail:</label>

		  <input type="text" name="myEmail" id="myEmail" />

		</div>

		

		<div class="myRow">

		  <label class="labelCol" for="myEmail">Experience:</label>

		  <textarea name="myExperience" id="myExperience" rows="2" cols="20">

		  </textarea>

		</div>

		

		<div class="mySubmit">

		  <input type="submit" value="Apply Now" />

		</div>

		

	  </form>

   

    </div>

	

    <div id="footer">

      Copyright © 2011 JavaJam Coffee House<br />

      <a href="chris@mouser.com">chris@mouser.com</a>

    </div>

	

  </div>

  

</body>

</html>

and now the stylesheet


body { background-color: #ffffcc;

      color: #330000;

	  font-family: Verdana, Arial, sans-serif;

	  background-image: url(background.gif); 

}

h1 {   background-color: #ccaa66;

      color: #000000;

	  text-align: center;

}

h2 {   background-color: #ccaa66;

      font-size: 1.2em;

	  padding-left: 10px;

	  padding-bottom: 5px;

}

img {  border: 0;

}

table { width: 100%;

      margin: auto;

}

td, th { 

      padding: 10px;

	  height: 80px;

	  text-align: center;

}

#nav { text-align: center; 

      background-color: #f1e8b0;

      font-size: 1em;

	  float: left;

	  width: 150px;

	  padding-top: 10px;

	  height: 100%;

	  position: absolute;

	  overflow: hidden;

}

#footer { background-color: #ccaa66;

       color: #000000;

	   border-top: 2px double #000000;

	   padding-top: 20px;

	   padding-bottom: 20px;

       font-size: .60em;

	   font-style: italic;

	   text-align: center;

	   position: relative;

}

#container { 

       margin-left: auto;

       background-color: #e8d882;

	   color: #000000;

	   border: 2px double #000000;

	   min-width: 700px;

       margin-right: auto;

	   width: 80%;

	   height: 100%;

	   position: relative;

	   overflow: hidden;

}

#logo { background-color: #ccaa66;

       color: #000000;

	   text-align: center;

	   margin: 0;

	   border-bottom: 2px double #000000;

}

#content { 

       margin-left: 150px;

	   background-color: #e8d882;

	   color: #000000;

	   padding: 10px 20px;

	

}

#nav a { text-decoration: none;

       margin: 5px;

	   text-align: center;

	   display: block;

}

#nav  a:hover {

       color: #ff0000;

}

#nav ul {

       list-style-type: none;

}

.floatright { 

       padding-left: 20px;

	   float: right;

}

.details { 

       padding-left: 20%;

       padding-right: 20%;

}

.altrow { 

       background: #ccaa66;

}

.labelCol {

      float: left;

	  width: 100px;

	  text-align: right;

	  padding-right: 10px;

}

.myRow {

      padding-bottom: 20px;

}

.mySubmit {

      margin-top: 10px;

	  margin-left: 110px;

}

The form items are supposed to be floating left and right aligned but the text areas and input boxes are not lined up. anyone help?