Alignement de deux formulaires

Bonjour,

J'ai créé 2 formulaires (adresse de livraison et adresse de facturation). Je voudrais les aligner horizontalement. Je les ai mis chacun dans un bloc div.
De plus dans mes formulaires, j'utilise des labels que j'ai défini en css de cette façon, où adresseF et adresseL sont mes blocs :

 
.adresseF label, .adresseL label{
	float: left;	/*** Très important, ne pas suprimer ! ***/
	/*width: 1%;	/*** Les intitulés prennent 1/3 de la largeur totale du formulaire... ***/
	text-align: right;	/*** ... et ils sont alignés à droite... ***/
	margin: 0;
	padding: 0 .5em 0 0;
	line-height: 1.8;	/*** ... et centrés verticalement. ***/
}

L'alignement en utilisant float:left sur un premier block, se fait seulement si je supprime le "width" du label. Mais là, le pb c'est que mes blocs ne sont plus alignés.
Je vois pas de solutions ... Est-ce qqn peut m'aider ?

Merci d'avance.

Bonjour,

Je tiens à attirer ton attention sur le fait que tu nous demandes de comparer deux choses en n'en montrant qu'une seule.

Il faut bien entendu le code source (HTML) des deux blocs, et aussi le code CSS utilisé pour chacun des éléments qui les composent (plus élément parent éventuellement).

Sinon, on ne voit que la facade d'une des deux maisons qu'on voudrait acheter, et donc on ne signera pas !

Voici le code html :

<div id="adresseF">
						<p>Adresse de facturation</p>
						<p>
							<label for="contactF">Contact:</label>
							<input type="text" name="contactF" id="contactF" value="" size="10" maxlength="10" />
							<a href="rechContact.php">Rech.</a>
						</p>
						<p>
							<label for="adrF">Adresse:</label>
							<input type="text" name="adrF" id="adrF" value="" size="20" maxlength="10" />
							<a href="rechContact.php">Rech.</a>
						</p>
						<p>
							<label for="cpVilleF">CP / Ville:</label>
							<input type="text" name="cpF" id="cpF" value="" size="10" maxlength="10" />
							<input type="text" name="villeF" id="villeF" value="" size="15" maxlength="15" />
						</p>
						<p>
							<label for="paysF">Pays:</label>
							<select name="paysF">
								<option value="france">France
								<option value="Allemagne">Allemagne
								<option value="Espagne">Espagne
							</select> 
						</p>
					</div>
					<div id="adresseL">
						<p>Adresse de livraison</p>
						<p>
							<label for="contactL">Contact:</label>
							<input type="text" name="contactL" id="contactL" value="" size="10" maxlength="10" />
							<a href="rechContact.php">Rech.</a>
						</p>
						<p>
							<label for="adrL">Adresse:</label>
							<input type="text" name="adrL" id="adrL" value="" size="20" maxlength="10" />
							<a href="rechContact.php">Rech.</a>
						</p>
						<p>
							<label for="cpVilleL">CP / Ville:</label>
							<input type="text" name="cpL" id="cpL" value="" size="10" maxlength="10" />
							<input type="text" name="villeL" id="villeL" value="" size="15" maxlength="15" />
						</p>
						<p>
							<label for="paysL">Pays:</label>
							<select name="paysL">
								<option value="france">France
								<option value="Allemagne">Allemagne
								<option value="Espagne">Espagne
							</select> 
						</p>
					</div>

Bonjour,

Et un width 50%, avec padding et margin = 0, pour chaque div, puis un margin-left et -right sur les paragraphes pour éviter que ce soit collé ?
Modifié par SiDi (20 May 2008 - 23:15)