help with error message placement

anoesis

I'm trying to get error messages to align with the corresponding text box. its a sign up form and im adding divs for each error message up they end up messing up the layout of the page

<?php session_start(); ?>
<!-- saved from url=(0022)http://internet.e-mail -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The South Florida Jimmy</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="images/favicon.ico" />
<script type="text/javascript" src="js/rotate.js"></script>
<script type="text/javascript" src="js/validation.js"></script>
<script type="text/javascript">
	function clearText(obj) {
		if (obj.value == "mm/dd/yyyy") {
			obj.value = "";
		}
		return;
	}
</script>
<style type="text/css">
<!--
.style1 {
	color: #000000;
	font-weight: bold;
}
.style2 {
	font-size: 18px
}
.style3 {
	color: #000066;
	font-weight: bold;
}
-->
</style>
</head>

<body id="dark" onload="document.joinForm.fname.focus()">
    <div id="main">
    	<div class="container">

<div id="header">

        	<ul class="style2" id="menu">
           	  <li><a href="index.php">HOME</a>                	</li>
           	  <li><a href="" class="style2">CURRENT ISSUE</a></li>
           	  <li><a href="gallery.php">GALLERY</a></li>
           	  <li><a href="">ADVERTISE</a></li>
           	  <li><a href="">CONTACT</a></li>
          </ul>
<p>

       	  <div id="logo">
            	<h1>Creatif</h1>
            <small>A Family of Rockstar Wordpress Them</small></div>

        <div id="block_featured" class="block">
			<img src="images/ribbon_featured.png" class="ribbon" alt="Featured Project"/>
        	<div class="block_inside">

            	<div class="join_image_block"><img src="join_side_text.png" alt="Eden" width="45" height="318" /></div>
<div class="text_block_left">

	 <div class="msg" id="msg">eror1</div>

    <form method="post" action="process.php" name="joinForm">          
      <p class="req_note">*All Fields Are Required</p> 

      <label for="fname">First Name</label>
      <p><input type="text" name="fname" id="fname" <?php if(isset($_GET['fname'])){echo "value=\"$_GET[fname]\"";} ?> onblur="checkFname(this)" /></p>

      <label for="lname">Last Name</label>
      <p><input type="text" name="lname" id="lname" <?php if(isset($_GET['fname'])){echo "value=\"$_GET[lname]\"";} ?> onblur="checkLname(this)" /></p>

      <label for="email">Email Address</label>
      <p><input type="text" name="email" id="email" <?php if(isset($_GET['fname'])){echo "value=\"$_GET[email]\"";} ?> onblur="validateEmail(this)"/></p>
      <p class="note">*Your email address will not be used for spam, promise.</p>

      <label for="bday">Birth Day</label>
      <p><input type="text" name="bday" id="bday" <?php if(isset($_GET['bday'])){echo "value=\"$_GET[bday]\"";}else{ echo "value='mm/dd/yyyy'";} ?> 
      																	onfocus="clearText(this)" onblur="checkBday(this)"/></p>

      <label for="password1">Password</label>
      <p><input type="password" name="pass1" id="pass1" /></p>

      <label for="password2">Confirm Password</label>
      <p><input type="password" name="pass2" id="pass2" onblur="checkPwd(this)" /></p>

  		<fieldset>
          <legend>Code</legend>
              <table border="0">
              	<tr>
                  <td><input name="user_code" id="user_code" type="text" size="10" /></td>
                  <td><img src="pngimg.php" alt="code"/></td>
                </tr>
        </table>
   		</fieldset>
      <br />
      <?php if(isset($_GET['ret'])) { echo "<input type='hidden' name='ret' value='$_GET[ret]' />"; }?>
      <input name="submit_join" type="submit" value="Sign Up!" />
    </form>          
</div>

              <div class="small_text_block">
                <span class="image_block"><img src="images/juneissue-1.jpg" alt="Eden" width="239" height="310"/></span>
              </div>               
          </div>
      </div>

<div id="block_portfolio">

        	<div id="portfolio_items">

            	<div class="mini_portfolio_item">
            	  <img src="images/ribbon_recent.png" class="ribbon" alt="Recent Projects"/>
<div class="block_inside">
                            <table width="536" border="0" align="center" cellpadding="0" cellspacing="6">
  <tr>
    <td width="100"><img src="images/testpartypic.jpg" alt="" width="100" height="100" /></td>
    <td width="100"><img src="images/testpartypic.jpg" alt="" width="100" height="100" /></td>
    <td width="100"><img src="images/testpartypic.jpg" alt="" width="100" height="100" /></td>
    <td width="100"><img src="images/testpartypic.jpg" alt="" width="100" height="100" /></td>
    <td width="100"><img src="images/testpartypic.jpg" alt="" width="100" height="100" /></td>

  </tr>
</table>

                  </div>                    
                </div>

<div class="mini_portfolio_item">
                    	<div class="block_inside">
                            <img src="images/sample_mini_portfolio2.jpg" class="thumbnail"  alt="CollisTaeed" />
                            <h3>test</h3>
                            <p>. <a href="#">View Project</a></p>
          </div>                    

                    </div>

                <div class="mini_portfolio_item">
                	<div class="block_inside">
                        <img src="images/" class="thumbnail" alt="PSDTUTS"  />
                        <h3>bl</h3>
                      <p>jfjffjfj<a href="#">View Project</a></p>
                    </div>                    
                </div>

            </div>

        </div>

    </div>
</div>

<div id="footer">
    	<div class="container"></div>
</div>
</body>
</html>

anoesis

css:

@charset "UTF-8";
/* 
	Background-Styles 
*/

body {
	margin:0px;
	padding:0px;
	background-color:#131211;
	font-family:Arial, Helvetica, sans-serif;
	color:#7f7d78;
	font-size:13px;
	line-height:19px;
}
#main {
	background:#c4c0be url(images/background_light_slice.jpg) repeat-x;
	padding-bottom:30px;
}
#main .container {
	background-image:url(images/background_light.jpg);
	background-repeat:no-repeat;
}
#footer {
	background-image:url(images/background_footer.jpg);
	background-repeat:repeat-x;
	padding:40px;
	position:relative;
	top:-20px;
	min-height:130px;
}
.container {
	width:920px;
	position:relative;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}


/* 
	Header-Styles 
*/

#header {
	padding-top:20px;
	padding-bottom:20px;
}
#logo h1, #logo small {
	margin:10px;
	display:block;
	text-indent:-9999px;
}
#logo {
    background-image:url(images/logo.png);
	background-repeat:no-repeat;
	width:864px;
	height:187px;

}
ul#menu {
	margin:0px;
	padding:0px;
	position:absolute;
	right:0px;
	width: 404px;
}

ul#menu li {
	display:inline;
	margin-left:12px;
}
ul#menu li a {
	text-decoration:none;
	color:#716d6a;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	font-weight:bold;
	text-transform:uppercase;
}
ul#menu li a.active, ul#menu li a:hover {
	color:#211e1e;
}
ul#settings {
	margin:0px;
	padding:0px;
	position:absolute;
	left:10px;
	width: 404px;
}
ul#settings li {
	display:inline;
	margin-left:12px;
}
ul#settings li a {
	text-decoration:none;
	color:#716d6a;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	font-weight:bold;
	text-transform:uppercase;
}
ul#settings li a.active, ul#settings li a:hover {
	color:#EEEEEE;
}

/* 
	Block-Styles 
*/

.block {
	border:1px solid #a3a09e;
	background-color:#ffffff;
	margin-bottom:20px;
	position:relative;
}
.ribbon {
	position:absolute;
	top:-3px;
	right:-3px;
}
.block_inside {
	display:block;
	border:1px solid #ffffff;
	background: #ffffff url(images/bg.jpg) repeat-x;
	padding:12px;
	overflow:auto;
}
.image_block {
	padding:5px 0px 1px 10px;
	float:left;
}
.join_image_block {
	float:left;
	padding-top: 5px;
	padding-right: 30px;
	padding-bottom: 1px;
	padding-left: 10px;
}
.image_block img {
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: hidden;
	border-right-style: hidden;
	border-bottom-style: hidden;
	border-left-style: hidden;
}
.text_block {
	float:right;
	width:500px;
	margin-left:15px;
	padding-top:13px;
}
.small_text_block {
	float:right;
	width:320px;
	margin-left:15px;
	padding-top:13px;
}
.text_block_left {
	float:left;
	width:400px;
	margin-left:15px;
	padding-top:13px;
	margin-bottom: 15px;
	color: #333333;
	position: relative;
}

#block_featuredblog .text_block { padding-top:5px }


/*
	Portfolio-Home-Styles
*/

#block_portfolio {
	overflow:auto;
	margin-bottom:20px;
}
#portfolio_items {
	width:560px;
	margin-right:25px;
	float:left;
	min-height:100px;
	padding-top:3px;
}
#text_column {
	float:right;
	width:310px;
	background-image: url(images/loginbg.jpg);
	padding: 10px;
}
#text_column img {
	margin-bottom:20px;
	position:relative;
	left:6px;
	padding: 10px;
}
#text_column h2#text_title { 
	text-indent:-9999px;
	background-image:url(images/creatif.jpg);
	background-repeat:no-repeat;
	width:310px;
	height:35px;
}

.mini_portfolio_item {
	border:1px solid #a3a09e;
	margin-bottom:10px;
	position:relative;
}
.mini_portfolio_item .block_inside {
	background:none;
	background-color:#e2dddc;
	padding-top: 25px;
	padding-right: 15px;
	padding-bottom: 15px;
	padding-left: 15px;
}
.mini_portfolio_item .thumbnail { float:left; margin-right:20px; border:1px solid #979390; }


/*
	Block-Content-Styles
*/

#content_area {
	width:665px;
	float:left;
}
#content_area .block_inside {
	min-height:400px;
}
#sidebar {
	float:left;
	width:281px;
	position:relative;
	left:-1px;
	margin-top:15px;
	background-color:#e2dddc;
	border:1px solid #a3a09e;
}
#sidebar .block_inside {
	background:none;
	background-color:#e2dddc;
}

#sidebar h3 {
	font-size:20px;
	line-height:23px;
}
#sidebar ul { margin:10px 0px 30px 0px; padding:0px; }
#sidebar ul li { list-style:none; margin:0px 0px 5px 0px; padding:0px; }
#sidebar ul li a { color:#7f7d78; }
#sidebar ul li a:hover { color:#0172dd; text-decoration:none; }


#content_area h2 { font-size:32px; line-height:31px; }

#content_area .separator {
	border-top:1px solid #e3e3e3;
	margin-top:40px;
	padding-top:40px;
}


/* 
	Text-Styles   

*/

h2 {
	margin:0px 0px 10px 0px;
	font-size:36px;
	font-family:Helvetica, Arial, Sans-serif;
	color:#000000;
	line-height:39px;
	letter-spacing:-1px;
}
h3 {
	margin:10px 0px 5px 0px;
	font-size:14px;
	line-height:21px;
	font-family:Helvetica, Arial, Sans-serif;
	color:#000000;
}
h4 {
	color:#007de2;
	margin:0px 0px 0px 0px;
}
small {
	color:#595856;
	font-weight:bold;
	font-size:11px;
	display:block;
	margin-bottom:15px;
}
a {
	color:#26689f;
	text-decoration:none;
}
small a {
	color:#007de2;
}
a:hover { text-decoration:underline; }
p {
	margin-top: -10px;
	margin-right: 0px;
	margin-bottom: 15px;
	margin-left: 0px;
}

a.button {
	background:#32312f url(images/button_bg.jpg) repeat-x;
	color: #ffffff;
	text-decoration: none;
	border:1px solid #32312f;
	text-transform:uppercase;
	font-size:9px;
	line-height:25px;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
}
a.button:hover {
	background:#007de2 url(images/button_bg_o.jpg) repeat-x;
	border-color:#007de2;
}

/*
	Footer-Styles
*/

#footer {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
}
.footer_column {
	float:left;
	width:120px;
	margin-right:30px;
}
#footer .long {
	width:610px;
}
#footer h3 {
	color:#e2dddc;
	text-transform:uppercase;
	font-size:10px;
}
.footer_column ul li, .footer_column ul {
	list-style:none;
	margin:0px;
	padding:0px;
}






/* 
	Miscellaneous-Styles   

*/
#dark .container #header #block_featured .block_inside .small_text_block #logout {
	float: right;
	margin-right:10pt;
}



/* Form Styles */
#dark .container #header #block_featured .block_inside .text_block_left label {
	font-weight: bold;
	color: #333333;
	margin-bottom:5pt;
}
#dark .container #header #block_featured .block_inside .text_block_left .note {
	font-size: 10px;
	font-style: italic;
	margin-top: -15px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
}
#dark .container #header #block_featured .block_inside .text_block_left .req_note {
	color: #990000;
	font-size: 10px;
	font-style: italic;
	margin-top: -15px;
}
#dark .container #header #block_featured .block_inside .text_block_left .error_note {
	font-style: italic;
	color: #990000;
}
#dark .container #header #block_featured .block_inside .text_block_left #captcha {
	margin-left: 20px;
}
#response {
	margin-top: 30px;
}
#dark .container #header #block_featured .block_inside .text_block_left label {
	padding-bottom: 5px;
	display:block;
}
#dark .container #header #block_featured .block_inside .text_block_left fieldset {
	width: 200px;
}
#dark .container #header #block_featured .block_inside .text_block_left .msg {
	color: #990000;
	font-weight:bold;
	width:220px;
	position:absolute;
	top:40px;
	right:0px;
}


/* Fix up IE6 PNG Support */
img, #logo { behavior: url(scripts/iepngfix.htc); }

#login_error {
	margin-top:-15pt;
}



/*
	Alternate Styles
*/
body#dark {
	background-color:#1e1d1b;
}
body#dark #main {
	background:#292826 url(images/background_dark_slice.jpg) repeat-x;
}
body#dark #main .container {
	background-image:url(images/background_dark.jpg);
}
body#dark #footer {
	background-image:url(images/background_dark_footer.jpg);
}
body#dark ul#menu li a.active, ul#menu li a:hover {
	color:#ffffff;
}
body#dark .block, body#dark .mini_portfolio_item {
	border-color:#1b1a19;
	background-image: url(images/bg.jpg);
}
body#dark #text_column h2#text_title { 
	background-image:url(images/creatif_dark.jpg);
}
#dark .container #header #block_portfolio #portfolio_items .mini_portfolio_item .block_inside a img {
	border: none;
}