asked on

Aligning contact form

I'd like to align the form submit area on this page: http://www.sp500futuresresearch.com/contact.php. I'd like Contact Us to push left some and then the form labels and boxes to line up nicely. How can I fix this?

SOLUTION

Zyloch

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Hagay Mandel

Check this
All styles were applied directly on the elements in order to prevent collisions with the rest of the CSS.

<!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">
<style type="text/css">
*{margin:0;padding:0;}

body { font: .8em Georgia, "Times New Roman", Serif; background: #fff; color: #777; }

a { color: #D40000; text-decoration: none; }

	a:hover { color: #8F0000; }

p { line-height: 1.7em; margin: 0 0 15px; }

.x { clear: both; }



h1 { float: left; font-size: 2em; font-weight: normal; font-style: italic; padding: 0 0 25px 10px; margin: 0 0 10px; }

h2 { font-weight: normal; font-size: 2.6em; padding: 0 0 10px; margin: 0 0 15px; }

h3 { font-size: 1.7em; font-weight: normal; margin: 0 0 20px; }

	h3 a { color: #222; }

	

#content { width: 960px; margin: 40px auto; }



#menu { float: right; margin: 10px 10px 0 0; }

	#menu li { display: inline; list-style: none; }

	#menu li a { float: left; margin: 0 0 0 20px; color: #888; }

		#menu li a:hover { color: #555; }



.post { clear: both; padding: 30px 10px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; margin: 0 0 40px; }

	.post .details { float: left; width: 250px; }

	.post .details .info { font-size: .9em; color: #999; }

		.post .details .info a { color: #777; border-bottom: 1px dotted #999; padding: 3px 1px; }

	.post .body { float: right; width: 618px; padding: 0 0 0 30px; border-left: 1px solid #ddd; }

	

.col { width: 290px; margin: 0 40px 30px 0; float: left; font-size: .9em; }

	.col.last { margin-right: 0; }

		

#footer { clear: both; border-top: 1px solid #ddd; padding: 20px 0; font-size: .9em; color: #999; }

</style>
<head>

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

	<meta name="author" content="Luka Cvrk (www.solucija.com)" />

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

	<title>S&P 500 Futures Research</title>

</head>

<body>

	<div id="content">

		<h1>S&P 500 Futures Research</h1>

		

		<ul id="menu">

			<li><a href="index.html">home</a></li> 
			<li><a href="products.html">products</a></li>

		</ul>

	

		<div class="post">

			<div class="details">

				<h2><a href="#">Historical daily S&P 500 futures data</a></h2>

			

			</div>

			<div class="body">

				<p> 
				<div id="main"> 
				        <div id="content" style="margin-bottom:20px;"> 
				      <div class="frame" style="margin:0 auto;width:600px;"> 
				
				    <div style="background-image: url(img/GradientBlackToGrayRounded.png);width:600px;height:300px;"> 
				    
				<!-- *************** content *************** --> 
				<div> 
				  <div> 
				    <div class="containercontactform"> 
				      <div id="content-zone"> 
				        <div class="outer"> 
				        <h1 style="padding:0px;">Contact Us</h1><br /><br />
				          <div class="inner"> 
				            <div class="sub"> 
				                  <div class="contact-messages content"> 
       						  </div> 
				              <form action="contact.php" method="post" id="sendEmail" class="horizontal"> 
				                <p>
				                  <!-- ================= put your email address here ================ --> 
				                  <input type="hidden" id="mailTo" name="mailTo" value="public@cygen.com" /> 
				                  <!-- ======== you will receive messages with this subject ========= --> 
				                  <input type="hidden" id="subject" name="subject" value="Message from Cygen" /> 
				                  <!-- ============================================================== --> 
				                  <input type="hidden" name="submitted" value="1" /> 
			                    </p>
				                <div style="clear:both">
								<div style="float:left; line-height:150%; width:80px;">
								Name <br /><br />
								Email <br /><br />
								Message 
								</div>
								<div style="float:left; line-height:150%;">
								<input name="name" id="name" value="" type="text"/><br /><br /> 
								<input name="email" id="mail" value="" type="text"/><br /><br />  
								<textarea name="message" id="message" cols="30" rows="10"></textarea> 
								</div>
								</div>
				                <div class="submit-row" style="clear:both"> 
				                  <button id="submit" type="submit" class="button" title="Send"><span>Send your message !</span></button> 
				                  
				                </div> 
				              </form> 
				            </div> 
				          </div> 
				        </div> 
				      </div> 
				    </div> 
				  </div> 
				</div> 
				
				</div> 
				</div> 
				</div> 
				</div> 
				</p>

			</div>

		</div>

		

		

		

		

		

		<div id="footer"> 
			<p>Copyright &copy; <em>Cygen</em> 2011 </p>

		</div>	

	</div>

</body>

</html>

Open in new window

brettr

ASKER

@HagayMandel:

Very nice. Thanks.

In Safari, it looks like this: http://d.pr/dDTb. Is it possible to push Contact Us to the left a little, so it fills some of that white area? If that is too involved, it's fine as is.

One more thing, is there a way to move the button to the right under the boxes? Preferably, aligned to the far left edge of the textarea?

ASKER CERTIFIED SOLUTION

Hagay Mandel

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Hagay Mandel

BTW, if you want the whole form to be shifted to the left, increase the width of the "frame" div:

<div class="frame" style="margin:0 auto;width:800px;">

Open in new window

brettr

ASKER

Thanks.