Welcome to WebmasterWorld Guest from 54.163.68.15

Forum Moderators: not2easy

Message Too Old, No Replies

how to space a form

   
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?
8:31 pm on Sep 30, 2011 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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.
7:13 pm on Oct 1, 2011 (gmt 0)



but doing so doesn't line all my textboxes up?
8:55 pm on Oct 1, 2011 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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;
}
5:07 pm on Oct 3, 2011 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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]