how to space a form

Forum Moderators: not2easy

Message Too Old, No Replies

how to space a form

kiwis

7:10 pm on Sep 30, 2011 (gmt 0)

I've got a form and it used to be places in a table. Trying not to use tables how can I set up my form where it is all equally spaced and looking nice? right now all my text boxes do not line up and the text before hand is of different lengths etc?

penders

8:31 pm on Sep 30, 2011 (gmt 0)

One way is to set the labels as display:inline-block, which then allows you to set a width so that they all line up.

kiwis

7:13 pm on Oct 1, 2011 (gmt 0)

but doing so doesn't line all my textboxes up?

penders

8:55 pm on Oct 1, 2011 (gmt 0)

Well, this might depend on your markup and what you are trying to achieve. Perhaps if you post your code we can have a look.

For example, the following produces a nice layout with all the text boxes lined up...

HTML:

<form class="nice-layout" action=""> 
<div> 
  <label for="ctrlName">Your Name:</label> 
  <input type="text" name="ctrlName" id="ctrlName" value=""> 
</div> 
<div> 
  <label for="ctrlTel">Your Telephone Number:</label> 
  <input type="text" name="ctrlTel" id="ctrlTel" value=""> 
</div> 
<div> 
  <label for="ctrlColour">Your Favourite Colour:</label> 
  <input type="text" name="ctrlColour" id="ctrlColour" value=""> 
</div> 
</form>

CSS:

form.nice-layout div { 
  margin: 2px 0;  /* Separate the controls for the benefit of IE */ 
} 
form.nice-layout label { 
  display: inline-block; 
  width: 14em; 
  text-align: right; 
}

rocknbil

5:07 pm on Oct 3, 2011 (gmt 0)

Here's another approach, avoiding div-itis using semantic elements and because, well, I love floats. :-)


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01  
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>Untitled</title> 
<style type="text/css"> 
 p, label, input { float: left; } 
 form, p { width: 22em; padding:0; } 
 form { margin: 0 auto; } 
 p { margin: 2px 0; }  
 p#submit-me { text-align: center; } 
 p#submit-me input { display: block; float: none; width: 6em; margin: auto; } 
 label { display: block; width: 10em; margin-right: 6px; text-align: right; } 
 input { width: 12em; } 
</style> 
</head> 
<body> 
<form class="nice-layout" action="">  
<p>  
 <label for="ctrlName">Your Name:</label>  
 <input type="text" name="ctrlName" id="ctrlName" value="">  
</p>  
<p>  
 <label for="ctrlTel">Your Telephone Number:</label>  
 <input type="text" name="ctrlTel" id="ctrlTel" value="">  
</p>  
<p>  
 <label for="ctrlColour">Your Favourite Colour:</label>  
 <input type="text" name="ctrlColour" id="ctrlColour" value="">  
</p>  
<p id="submit-me"><input type="submit" value="submit"></p> 
</form> 
</body> 
</html>

[edited by: alt131 at 12:49 pm (utc) on Nov 27, 2011]
[edit reason] Side Scroll [/edit]