[IMPORTANT SVP] Mise en page d'un formulaire 2 colonnes

Bonjour à tous,
je me bats avec la mise en page d'un formulaire sur 2 colonnes!
Pour dire à quel point je suis arrivé, je suis même tenté par le retour au tableau!
Bref...
alors je dispose d'une div contenant tout le formulaire, les 2 parties de mon formulaire sont placées dans des fieldset.
Dans chaque fieldset j'ai donc une paragraphe pour chaque ligne contenant un label et un input(ou select).
Exemple:

<div id="form">
<fielset>
<p><label>Nom</label><input name="nom" type="text" /></p>
<p><label>Code postal</label><input name="cp" type="text" /></p>
</fieldset>
<fielset>
<p><label>Prenom</label><input name="prenom" type="text" /></p>
<p><label>Age</label><input name="age" type="text" /></p>
</fieldset>
</div>

Je souhaite que les 2 fieldset soient en colonne (à priori display:inline), les label alignés sur le droite et les inputs(ou select) sur la gauche...
Ne me demandez pas le CSS, il est devenu un vrai foutoir et j'en peux plus.
Quelqu'un peut m'aider à réaliser ce que je veux? C'est vraiment important...
Merci d'avance
PS: je manque terriblement de temps
Modifié par starkeus (27 Dec 2005 - 17:40)

Sans être une pro du CSS, voici ce que je te propose (ca n'est pas forcément la bonne solution mais ça a l'air de fonctionner et peut-être que ca t'inspirera...).

la css :

#form {
	margin: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
}
#form div {
	padding: 5px;
	border: 1px solid #000000;
	width: 310px;
	height: 20px;
	margin-bottom: 5px;
}
#form label {
	text-align: left;
}
#form input {
	text-align: right;
}

le HTML :

<div id="form">

	<div>
		<span style="margin-right:20px;"><label>Nom </label></span>
		<span style="margin-right:20px;"><input name="nom" type="text" size="15" /></span>
		<span style="margin-right:10px;"><label>Code postal </label></span>
		<span><input name="cp" type="text" size="5" /></span>
	</div>

	<div>
		<span style="margin-right:5px;"><label>Prenom </label></span>
		<span style="margin-right:20px;"><input name="prenom" type="text" size="15" /></span>
		<span style="margin-right:46px;"><label>Age </label></span>
		<span><input name="age" type="text" size="5" /></span>
	</div>

</div>

Je te remercie beaucoup. Ca ne réponds pas complètement à mon problème mais cela a au moins le mérite de me mettre sur la voie. Le principal soucis est d'obtenir une solution générique c'està dire totalement indépendant de la taille des éléments comme les labels ou les inputs.
Je vais encore essayer mais j'ai bien peur de devoir revenir au tableau.

En gros je souhaite obtenir cet effet mais en CSS:

<table border="0" cellpadding="1" cellspacing="1">
<tr><td align="right"><label>Nom :</label></td><td align="left"><input type="text" name="nom"/></td><td align="right"><label>Prenom :</label></td><td align="left"><input type="text" name="prenom"/></td></tr>
<tr><td align="right"><label>Age :</label></td><td align="left"><input type="text" name="age"/></td><td align="right"><label>Ville :</label></td><td align="left"><input type="text" name="ville"/></td></tr>
</table>

alors je dirais quelque chose comme ca :

la CSS :

#form {
	margin: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
}
#form div#conteneur {
	width: 400px;
	line-height: 22px;
}
#form div#conteneur span {
	padding: 0px;
	margin: 0px;
	width: 20%;
	float:left;
	text-align: right;
}
#form input {
	text-align: right;
	margin-right: 10px;
	width: 100%;
}

et le HTML :

<div id="form">

	<div id="conteneur">
		<span><label >Nom : </label><br /><label>Age : </label></span>
		<span><input name="nom" type="text" /><br /><input name="age" type="text" /></span>
		<span><label>Prenom : </label><br /><label>Ville : </label></span>
		<span><input name="prenom" type="text" /><br /><input name="ville" type="text" /></span>
	</div>

</div>

Bonjour,

Dans un soucis d'accessibilité il peut être bien d'ajouté l'attribut "for" pour les labels ainsi que la déclaration suivante dans la css

label{cursor:pointer;}


EDIT:

Par contre si on regarde le code de taly par rapport au flux cela donne 2 labels de suite cela vas être géré comment à la lecture par Jaws par exemple?
Modifié par knarf (27 Dec 2005 - 19:48)

Bonsoir,

Le code ci-dessus (Taly) pose en effet comme un petit problème d'incohérence entre labels et champs sans CSS

En fait, avec ou sans for=, il n'est pas accessible et sera très mal vécu par tous les utilisateur sans CSS, handicapés ou non.

Pour revenir au problème de départ : Les solutions CSS permettant d'obtenir les alignements gauche/droite des labels et des contrôles reposent essentiellement sur des flottants et sur la propriété clear... laquelle n'est plus supportée par FF1.5 dans les fieldset. En attendant donc la prochaine version de ce navigateur régressif, mieux vaut s'en tenir aux tableaux

(FF encourageant la mise en page avec des tableaux... Amusant, non ? )

ok bah je vais repasser en tableau.
Merci à tous !

En passant, merci d'éviter les choses du genre "[IMPORTANT SVP]" dans vos titres : tous les sujets sont importants pour leurs auteurs, sinon ils n'en créeraient pas.