Forums

brianatlarge

Here's the page: http://stuckpixelstudio.com/clients/pay ... ntact.html

As you can see, the right column which has the contact form is going down, where I would like for it to be even with the left column.

Here's the HTML:

	<body>
		<div class=\"header\"></div>
		<div class=\"navbar\">
			<ul id=\"nav\">
				<li><a href=\"index.html\">Home</a></li>
				<li><a href=\"products/index.html\">Products</a>
					<ul>
						<li><a href=\"products/flow_restrictors.html\">Flow Restrictors</a></li>
						<li><a href=\"products/drain_saddles.html\">Drain Saddles</a></li>
						<li><a href=\"products/mounting_clips.html\">Mounting Clips</a></li>
						<li><a href=\"products/automatic_shutoff.html\">Automatic Shut Off Valves</a></li>
						<li><a href=\"products/accessories.html\">Accessories</a></li>
						<li><a href=\"products/membrane_housings.html\">Membrane Housings</a></li>
					</ul>
					<li><a href=\"about.html\">About</a></li>
					<li><a href=\"contact.html\">Contact</a></li>
				</li>
			</ul>
		</div>
		<div class=\"contactimage\">
			<div class=\"contactaddress\">
				<div class=\"column1\">
					<h1>Contact</h1><br>
					Payne Industries, LLC<br>
					8822 Cypress Woods Lane<br>
					Olive Branch, MS  38654<br>
					<br>
					Tel:   800-123123<br>
					662-895-6444<br>
					<br>
					Fax:  800-123123<br>
					662-895-6610<br>
				</div>
				<div class=\"column2\">
            	
										<?php include(\"header.inc\"); ?>
					<form action=\"output.php\" method=\"post\" id=\"form1\" >
						<div>
							<input type=\"hidden\" name=\"sort\" value=\"order:Name,Phone_No,Fax_No,Zip_Code,Email,Comments\" />
							<input type=\"hidden\" name=\"subject\" value=\"Contact Form\" />
							<input type=\"hidden\" name=\"return_link_title\" value=\"Your Web Site\" />
							<input type=\"hidden\" name=\"return_link_url\" value=\"/\" />
							<input type=\"hidden\" name=\"required\" value=\"Name,Phone_No,Fax_No,Zip_Code,Email,Comments\" />
							<input type=\"hidden\" name=\"recipient\" value=\"us@stuckpixelstudio.com\" />
						</div>
						<fieldset style=\"width: 90%\">
							<legend>Contact Us </legend>
							<p>
								<label for=\"Name\">Name:</label>
								<br />
								<input type=\"text\" id=\"Name\" name=\"Name\" size=\"24\" />
							</p>
							<p>
								<label for=\"Phone_No\">Phone:</label>
								<br />
								<input type=\"text\" id=\"Phone_No\" name=\"Phone_No\" size=\"24\" />
							</p>
							<p>
								<label for=\"Fax_No\">Fax Phone:</label>
								<br />
								<input type=\"text\" id=\"Fax_No\" name=\"Fax_No\" size=\"24\" />
							</p>
							<p>
								<label for=\"Zip_Code\">Zip Code :</label>
								<br />
								<input type=\"text\" id=\"Zip_Code\" name=\"Zip_Code\" size=\"24\" />
							</p>
							<p>
								<label for=\"Email\">Email:<br />
								</label>
								<input type=\"text\" id=\"Email\" name=\"Email\" size=\"24\" />
							</p>
							<p>
								<label for=\"Comments\">Comments:</label>
								<br />
								<textarea name=\"Comments\" id=\"Comments\" rows=\"5\" cols=\"30\"></textarea>
							</p>
							<p>
								<input name=\"Submit\" type=\"submit\" value=\"Send\" />
							</p>
						</fieldset>
					</form>
										<?php include(\"footer.inc\"); ?>
				</div>
			</div>
	</body>

And here's the CSS:

body {
margin:0px; padding:0px;
font-family:Arial, Helvetica, sans-serif;
}

.header {
background:url(images/header.jpg);
width:1000px;
height:200px;
min-height:200px;
margin: 0px;
padding:0px;
}

.navbar {
background:url(images/navbar.jpg) repeat-x;
min-height:21px;
height:21px;
color:#ffffff;
}

.waterdrop {
background:url(images/test.jpg);
width:1000px;
min-height:439px;
height:439px;

}

.hometext {
position:absolute;
top:350px;
left:400px;
width:586px;
font-size:22px;
}

.contactimage {
background:url(images/contact.jpg);
min-height:685px;
height:685px;
width:733px;
color:#ffffff;
}

.contact {
color:#ffffff;
margin-left:100px;
padding: 30px 0px 0px 0px;
}

h1 {display:inline;}

.column1 { float:left; width:380px; margin-right:30px; margin-left:70px;}
.column2 { float:right; width:380px;}

#nav, #nav ul{
margin:0px;
padding:4px 0px 0px 0px; 
list-style-type:none;
list-style-position:outside;
position:relative;
margin-right:10px;
font-size:12px;
text-transform:uppercase;

}

#nav a{
display:block;
padding:0px 5px;
color:#fff;
text-decoration:none;
background-color:#b31212;
}

#nav a:hover{
background-color:#fff;
color:#333;
}

#nav li{
float:left;
position:relative;
}

#nav ul {
position:absolute;
display:none;
width:12em;
top:1.1em;
}

#nav li ul a{
width:12em;
height:auto;
float:left;
}

#nav ul ul{
top:auto;
}	


#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}

.content {
background:#cccccc;
width:500px;
margin: 0px auto;
padding: 10px;
}

Thanks.

chriscoyier

Try reducing your column one width to around 250px; That should bring it back up.

brianatlarge

Awesome! Thanks, that was it.

treehouse : what would you like to learn today?

Forums

My second column is going down!