1 reply [Last post]
yanksno1
Offline
newbie
Deerfield Beach, FL
Last seen: 13 years 4 weeks ago
Deerfield Beach, FL
Timezone: GMT-5
Joined: 2006-04-20
Posts: 3
Points: 0

I'm trying to do a tableless 2 column form. I've liked using

,
,
for my forms but have run into a problem in trying to create a 2 column one. Funny thing is that in both IE6 and 7 it renders right like it should. But everything else there's spacing issues. Here's the code I'm using. Any suggestions?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form</title>
<style type="text/css">
* {
	padding: 0px;
	margin: 0px;
	border: none;
	outline: none;
}
body {
	font-family: Arial, Helvetica, sans-serif; font-size: 12px;	
}
#conform {
	width: 480px;
	margin: 0px auto;
	overflow: hidden;
}
 
#conform dt {
	width: 230px;
	float: left;
	clear: left;
}
 
#conform dd {
	width: 230px;
	margin-bottom: 10px;
	float: left;
	clear: left;
}
 
#conform dt.clmn, #conform dd.clmn {
	float: right;
	clear: right;
}
 
#conform dd input {
	width: 220px; height: 14px;
	padding: 2px;
}
 
#conform dd input#zip, #conform dd input#ext {
	width: 75px;	
}
 
#conform dd select {
	width: 225px; height: 18px;
	padding: 0px;	
}
 
#conform dd textarea {
	width: 220px; height: 120px;
	padding: 2px;
	overflow: auto;
}
 
#conform dd#btnrow input {
	width: auto; height: auto;
	padding: 0px;
	margin: 0px 2px 0px 0px;
	border: none;
}
.border01, input, select, textarea {
	border: 1px solid #6c665c;	
}
</style>
</head>
<body>
<div id="conform">
    <dt><label for="name">Name:</label></dt>       
    <dd><input type="text" name="name" id="name" size="32" class="comment" maxlength="32" /></dd>
    <dt class="clmn"><label for="company">Company:</label></dt>
    <dd class="clmn"><input type="text" name="company" id="company" size="32" class="comment" maxlength="32" /></dd>
    <dt><label for="street">Street Address:</label></dt>
    <dd><input type="text" name="street" id="street" size="32" class="comment" maxlength="32" /></dd>
    <dt class="clmn"><label for="city">City:</label></dt>
    <dd class="clmn"><input type="text" name="city" id="city" size="32" class="comment" maxlength="32" /></dd>
</div>       
</body>
</html>

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 48 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Let's see if this gets

Let's see if this gets through teh Stasi filter : (

You are clearing both sides, which is why it breaks in modern browsers. IE is ignoring your clears entirely, due to the bug where floats in the same direction cannot clear other floats.

Since this is hard to type esp with examples I've sent you a PM.

I'm no expert, but I fake one on teh Internets