[RESOLVED] Need advice on simple positioning question

**contractor** · 12-10-2009 01:03 AM

I have a very simple "2 column" CSS form below. It displays labels down the "left column" and the data input fields down the "right column"

If I wanted to add text, such as "The quick brown fox jumped over the lazy white dog", to be positioned directly adjacent and to the right of only the "file1Checkbox" field (which in this example this is the first CHECKBOX field) then what is the preferred CSS way to do so?

Code:

<html>
<head>

label, input {
	display: block;
	float: left;
	width: 150px;
	margin-bottom: 10px;
	margin-right: auto;
}
label {
	width: 110px;
	text-align: right;
	padding-right: 10px;
	margin-top: 2px;
}
br {
	clear: left;
}
</style>
</head>
<body>
<form method="post" action="" >

	<label for="firstname">First Name:</label>
	<input type="text" name="firstname" id="firstname"/><br/>

	<label for="lastname">Last Name:</label>
	<input type="text" name="lastname" id="lastname"/><br/>

	<label for="emailaddress">Email Address:</label>
	<input type="text" name="emailaddress" id="emailaddress"/><br/>

	<label for="file1">File 1 Upload:</label>
	<input type="checkbox" name="file1Checkbox">The quick brown fox jumped over the lazy white dog.<br/>
	<label for="file1label"></label>
	<input type="file" name="file1" id="file1"/><br/>

	<label for="file2">File 2 Upload:</label>
	<input type="checkbox" name="file2Checkbox"><br/>
	<label for="file2label"></label>
	<input type="file" name="file2" id="file1"/><br/>
	<button type="submit">Submit</button>
</form>
</body>
</html>

**Fang** · 12-10-2009 04:23 AM

Code:

input[type="checkbox"] {width:auto; margin-left:70px;}

**contractor** · 12-10-2009 08:56 AM

Thanks, Fang. That did the trick.

Here I was trying to define a style for the "The quick brown fox..." text itself, but you pointed out that I needed, instead, to affect the style of the checkbox field in front of it.

Is there a simple rule of thumb for knowing how to approach these situations - i.e, whether to tweak the element itself or the element(s) before it?

**contractor** · 12-10-2009 10:52 AM

Originally Posted by Fang

Code:

input[type="checkbox"] {width:auto; margin-left:70px;}

Fang, I spoke too soon. Adding this style for type="checkbox" works well for FF and Safari, but IE (at least IE7 and IE8) leaves the phrase "The quick brown fox..." over too far to the right of the checkbox - like it's trying to be in a third column that is to the right of the widest input fields.

Any suggestions that would work for IE too?

Here is the complete page to date:

Code:

<html>
<head>

label, input {
	display: block;
	float: left;
	width: 150px;
	margin-bottom: 10px;
	margin-right: auto;
}

input[type="checkbox"] {width:auto; margin-left:70px;}
label {
	width: 110px;
	text-align: right;
	padding-right: 10px;
	margin-top: 2px;
}
br {
	clear: left;
}
</style>
</head>
<body>
<form method="post" action="" >

	<label for="firstname">First Name:</label>
	<input type="text" name="firstname" id="firstname"/><br/>

	<label for="lastname">Last Name:</label>
	<input type="text" name="lastname" id="lastname"/><br/>

	<label for="emailaddress">Email Address:</label>
	<input type="text" name="emailaddress" id="emailaddress"/><br/>

	<label for="file1">File 1 Upload:</label>
	<input type="checkbox" name="file1Checkbox">The quick brown fox jumped over the lazy white dog.<br/>
	<label for="file1label"></label>
	<input type="file" name="file1" id="file1"/><br/>

	<label for="file2">File 2 Upload:</label>
	<input type="checkbox" name="file2Checkbox"><br/>
	<label for="file2label"></label>
	<input type="file" name="file2" id="file1"/><br/>
	<button type="submit">Submit</button>
</form>
</body>
</html>

I am looking to place the phrase "The quick brown fox..." immediately to the right of the checkbox.

**Fang** · 12-10-2009 11:02 AM

Use a DTD, preferably html4 strict.

**contractor** · 12-10-2009 11:41 PM

DTD works as hoped. It's all slowly starting to make sense. Thanks for help, Fang

Thread: [RESOLVED] Need advice on simple positioning question

Thread Tools

Display

[RESOLVED] Need advice on simple positioning question

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions