Aligning form fields

wright67uk · 06-11-2012, 10:31 PM

Can anybody share some advice on how I can align my text with my form fields. This is what I have;



<html> 

<head>

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

<title>Untitled Document</title>



<style type="text/css">

#midright1  	{width:205px; height:130px; margin-bottom:10px; margin-left:10px; padding:5px; font-size:100%; clear:both; }

.emailtext 		{margin-top:16px;}

.firstname		{margin-right:6px; float:right; }

.email 			{margin-right:6px; float:right; margin-bottom:4px; margin-top:4px;}

</style>



</head>



<body>



<div id="midright1">

<span style="font-weight: bold;">Free Report</span><hr />why do my form fields not align?<br /><br />

<span style="font-weight: bold;">Name </span>                    <input type="text" name="firstname" class="firstname"/><br/>

<span  style="font-weight: bold" class="emailtext";>Email</span> <input type="text" name="email" class="email" />                                                                 <input type="submit" value="submit" /></div>

</body>

</html>

SeattleMicah · 06-11-2012, 10:53 PM

no css

Code:

<div id="midright1">
<span style="font-weight: bold;">Free Report</span> why do my form fields not align?<br>
<strong>Name:</strong><input type="text" name="firstname" class="firstname"/><br>
<strong>Email:</strong><input type="text" name="email" class="email"/> <input type="submit" value="submit" />
</div>

wright67uk · 06-12-2012, 05:26 AM

Im not really sure what is meant by your answer.
I need to use CSS to posistion the field boxes to where I want them.

Now my task is to alight the text so that they are level with the boxes.

Will Bontrager · 06-12-2012, 03:11 PM

Looks like .firstname needs float:left instead of float:right, clear:both removed from #midright1 and used instead in a div between table rows, .emailtext needs float:left, and both type="text" input fields float:right. That is, if I understand what you are trying to accomplish.

Something like this might work.

Code:

<!-- inline CSS can be transferred to style sheet -->
<div style="width:205px;">
<div style="float:left; padding-top:3px;">Name:</div>
<div style="float:right;"><input type="text" style="width:150px;"></div>
<div style="clear:both; height:4px;"></div>
<div style="float:left; padding-top:3px;">Email:</div>
<div style="float:right;"><input type="text" style="width:150px;"></div>
<div style="clear:both;"></div>
<input type="submit" style="margin-top:4px;">
</div>

Will

abduraooft · 06-12-2012, 03:47 PM

Have a look at http://www.alistapart.com/articles/p...ccessibleforms

That will help you to setup an accessible form too.