Centering & aligning elements inside a fieldset

HTML & CSS
1

Hello,

I currently have a fieldset which must take 96% of my container, however it is already inside a div doing the job of setting this 96% width… This fieldset must have his elements centered but also aligned, so for example all the labels must end at the same spot and all the inputs must begin at the same spot.

This was fairly easy without the whole center problem with this code (JSFiddle):


.formulaire
{
    margin: 1em auto;
    border-style: solid;
    border-width: 1px;
    border-color: #B0B0B0;
    padding: 1em;

}

.formulaire label
{
    float: left;
    width: 25%;
    text-align: right;
}

I’ve tried to put my fieldset inside a div with text-align center, however it simply centers everything and doesn’t align anything. I’ve also tried to put my form content (labels and inputs) inside another div then center this div, however this solution was not flexible enough because it required a different ID for each fieldset with the width based on the fields size.

I was thinking of making setting my label width to 50% or adding two divs with 50% width and text-aligning inside them, however I am not quite sure it would be the best solution at all.

Any help would be greatly appreciated

Thanks !

2

HI,

You could do something like this using inline-block.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
input[type=text]:focus { background:#e4f0f8 }
.formexample {
	width:80%;
	border:1px solid #000;
	margin:20px auto;
	text-align:center;	
}
.formtest { background:#f9f9f9; }
.formtest fieldset{
	padding:20px;
	margin:0;
	border:none;
	display:inline-block;
	*display:inline;/* ie6/7 hack for inline block */
	zoom:1.0;/* ie6/7 hack for inline block */
	vertical-align:middle;
	width:50%;
}
.formtest label {
	display:inline-block;
	vertical-align:middle;
	width:25%;
	min-width:90px;
	text-align:right;
	margin:5px 0;
}
.formtest input {
	width:60%;
	min-width:100px;
	margin:5px 0;
 vertical-align:middle;
	border:1px solid #ddd;
	text-align:left;
}
#submit {
	border:1px solid #000;
	color:#000;
	padding:0;
	overflow:hidden;
	height:25px;
	font-weight:bold;
	margin:auto;
	display:block;
	text-align:center;
}
#submit:hover {
	background:#000;
	color:#fff
}
.formtest div {
	border:2px solid #fff;
	padding:5px;
}
</style>
</head>

<body>
<div class="formexample">
		<form  class="formtest" id="form1" method="post" action="">
				<fieldset>
						<legend>Address Details</legend>
						<div>
								<label for="firstname">First Name:</label>
								<input type="text" name="firstname" id="firstname" />
						</div>
						<div>
								<label for="lastname">Last Name:</label>
								<input type="text" name="lastname" id="lastname" />
						</div>
						<div>
								<label for="address1">Address 1:</label>
								<input type="text" name="address1" id="address1" />
						</div>
						<div>
								<label for="address2">Address 2:</label>
								<input type="text" name="address2" id="address2" />
						</div>
						<div>
								<label for="address3">Address  3:</label>
								<input type="text" name="address3" id="address3" />
						</div>
						<div>
								<label for="address4">Address 4:</label>
								<input type="text" name="address4" id="address4" />
						</div>
						<div>
								<label for="city">City:</label>
								<input type="text" name="City" id="city" />
						</div>
						<div>
								<label for="state">State:</label>
								<input type="text" name="state" id="state" />
						</div>
						<div>
								<label class="zip" for="zip">Zip:</label>
								<input type="text" name="zip" id="zip" />
						</div>
						<div>
								<label for="tel">Telephone:</label>
								<input type="text" name="tel" id="tel" />
						</div>
						<div>
								<input type="submit" name="submit" id="submit" value="Submit" />
						</div>
				</fieldset>
		</form>
</div>
</body>
</html>

It all depends on how you want it to look but something like that should work :slight_smile:

3

Hello,

Thanks for your answer. I’ve tried your solution, it worked well but as I received new specifications, it couldn’t work anymore.

My problem is that the inputs can be of different size and the buttons needs to be aligned with the largest input.

Here’s an example:

To achieve this, I had to set my label to a width of 50% and text-align right, which placed my labels pretty much in the middle of the fieldset. Then, I simply placed my inputs next to it and it was considered to be fine so far, even with multiple size inputs. However, the button is placed using a margin-right directly on its HTML tag since EACH page needs a different margin for this button, this is where it gets troublesome.

I tried putting it back inside a div to be able to do this easily, but I had some trouble when the inputs were not of the same size, when I tried to simply play with the width of my labels, they would break since they would take 50% of the new div instead of the whole fieldset…

Would you have any idea how to make the input part of my form be as a whole ? So the button can easily be placed at the bottom right according to the largest input ?

Thanks

4

For IE8+ you could do it like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
input[type=text]:focus { background:#e4f0f8 }
.formexample {
	width:80%;
	border:1px solid #000;
	margin:20px auto;
	text-align:left;
}
.formtest { background:#f9f9f9; }
.formtest fieldset {
	padding:20px;
	margin:0 auto;
	border:none;
	display:table;
	width:1px;
 *display:inline;/* ie6/7 hack for inline block */
	zoom:1.0;/* ie6/7 hack for inline block */
	vertical-align:middle;
}
.formtest label {
	display:inline-block;
	vertical-align:middle;
	width:150px;
	text-align:right;
	margin:5px 0;
}
.formtest input {
	min-width:150px;
	margin:5px 0;
	vertical-align:middle;
	border:1px solid #ddd;
	text-align:left;
}
input.address { width:250px }
.formtest div{white-space:nowrap}
.submit {
	display:block;
	text-align:right
}
#submit {
	border:1px solid #000;
	color:#000;
	padding:0;
	overflow:hidden;
	height:25px;
	width:80px;
	font-weight:bold;
	margin:10px 0;
	display:inline;
	text-align:center;
}
#submit:hover {
	background:#000;
	color:#fff
}
</style>
</head>

<body>
<div class="formexample">
		<form  class="formtest" id="form1" method="post" action="">
				<fieldset>
						<legend>Address Details</legend>
						<div>
								<label for="firstname">First Name:</label>
								<input type="text" name="firstname" id="firstname" />
						</div>
						<div>
								<label for="lastname">Last Name:</label>
								<input type="text" name="lastname" id="lastname" />
						</div>
						<div>
								<label for="address1">Address 1:</label>
								<input class="address" type="text" name="address1" id="address1" />
								<br>
						</div>
						<div class="submit">
								<input type="submit" name="submit" id="submit" value="Submit" />
						</div>
				</fieldset>
		</form>
</div>
</body>
</html>

The main ingredients are display:table with a 1px width, whitespace:no-wrap to force each pair to stay on a line and text-align right on the last div to move the input to the right of the widest element.

5

Any idea for IE7? :S

6

Hi,

Sorry for the delay in replying.

This should work in IE7 as well:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
input[type=text]:focus { background:#e4f0f8 }
.formexample {
	width:80%;
	border:1px solid #000;
	margin:20px auto;
text-align:center;
}
.formtest { background:#f9f9f9; }
.formtest fieldset {
	padding:20px;
	margin:0 auto;
	border:none;
	display:table;
	width:1px;
 *display:inline;/* ie6/7 hack for inline block */
	*width:auto;/* ie 6/7 */
	zoom:1.0;/* ie6/7 hack for inline block */
	vertical-align:middle;
	text-align:left;
}
.formtest label {
	display:inline-block;
	vertical-align:middle;
	width:150px;
	text-align:right;
	margin:5px 0;
}
.formtest input {
	min-width:150px;
	margin:5px 0;
	vertical-align:middle;
	border:1px solid #ddd;
	text-align:left;
}
input.address { width:250px }
.formtest div{white-space:nowrap}
.submit {
	display:block;
	text-align:right
}
#submit {
	border:1px solid #000;
	color:#000;
	padding:0;
	overflow:hidden;
	height:25px;
	width:80px;
	font-weight:bold;
	margin:10px 0;
	display:inline;
	text-align:center;
}
#submit:hover {
	background:#000;
	color:#fff
}
</style>
</head>

<body>
<div class="formexample">
		<form  class="formtest" id="form1" method="post" action="">
				<fieldset>
						<legend>Address Details</legend>
						<div>
								<label for="firstname">First Name:</label>
								<input type="text" name="firstname" id="firstname" />
						</div>
						<div>
								<label for="lastname">Last Name:</label>
								<input type="text" name="lastname" id="lastname" />
						</div>
						<div>
								<label for="address1">Address 1:</label>
								<input class="address" type="text" name="address1" id="address1" />
								<br>
						</div>
						<div class="submit">
								<input type="submit" name="submit" id="submit" value="Submit" />
						</div>
				</fieldset>
		</form>
</div>
</body>
</html>