Aligning contact form

brettr
brettr used Ask the Experts™
on
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?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2004
Commented:
This is not a complete fix, because only you know how you want your page to look. Here are a few tips.

First, the horizontal position of the "Contact Us" text and form is controlled by this code:
<div class="frame" style="margin:0 auto;width:600px;">

Open in new window

The auto margin centers what is inside this <div>. To move its contents more to the left, you can make the width larger. Better yet, change the auto margin to something else, like 50px, which will control how far from the vertical line your form is.

Next, in order to make the "Contact Us" be to the left of the form field and labels, the following element needs to also be floated left, just like the <h1> above it:
<div class="inner">

Open in new window


Now, making the form fields line up is more tricky and is really dependent on what you want. To make no new line between the "Your email" label and the text field, remove the <br> tag between them. To make the "Your message" label at the top of the textarea, give it the style vertical-align: top. If you want to make the text fields all nicely aligned vertically, however, you will need to give the label a float left and the text field a float right.
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

Author

Commented:
@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?
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

I don't know about the Safari issue, since I don't see any difference.
As for the submit button, this takes care of it.
<!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><br />
								<div class="submit-row" style="clear:both"> 
				                  <button id="submit" type="submit" class="button" title="Send"><span>Send your message !</span></button> 
				                </div>  
								</div>
								</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

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

Author

Commented:
Thanks.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial