View Full Version : Aligning form fields

06-11-2012, 11:31 PM
Can anybody share some advice on how I can align my text with my form fields. This is what I have;

<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;}



<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>

06-11-2012, 11:53 PM
no css

<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" />

06-12-2012, 06: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, 04: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.

<!-- 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;">


06-12-2012, 04:47 PM
Have a look at http://www.alistapart.com/articles/prettyaccessibleforms

That will help you to setup an accessible form too.