[Résolu] Aligner 4 DIV

Bonjour à tou(te)s,
Je souhaite aligner mes 4 DIV horizontalement, pour mettre en forme mon formulaire.
J'ai appliqué une solution trouvé sur le site mais cela ne fonctionne pas.

<div id="container">
<form action="contact.php" method="post">
 <div id="gauche">
  <p>
        Civilité :<br><br>
        Nom :<br><br>
	Email :<br><br>
	Tel :<br><br>
  </p>
  </div>
  
  <div id="milieu_gauche">
  <p>
	<select id="civilite" name="civilite">
            <option value="Monsieur" selected="selected">Monsieur</option>
            <option value="Madame">Madame</option>
            <option value="Mademoiselle">Mademoiselle</option>
        </select>
  </p>
  <p>
        <input name="nom" type="text" />
  </p>
  <p>
       <input name="email" type="text" />
  </p>
  <p>
	<input name="tel" type="text" />
  </p>
    </div>

  <div id="milieu_droite">
  <p>
    Message :
  </p>
  </div>
  
  <div id="droite">
	<textarea name="message" rows="5" cols="30"></textarea>
  </div>
  
  <div id="bas" style="text-align: center">
	<input type="submit" value="Envoyer" style="width: 120px" /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   <input type="reset" value="Annuler" style="width: 120px" />
 </div><br>
</form>
</div>

#container
{
background-color: #002A50;
  width: 850px;
  margin: 0 auto;
}

#gauche
{
	color:#fff;
	width: 50px;
	margin: 10px;
	padding: 10px;
}

#milieu_gauche
{
	width: 250px;
	margin: 10px;
}

#milieu_droite
{
	color:#fff;
	width: 70px;
	margin: 10px;
	padding: 10px;
}

#droite
{
	width: 250px;
	margin: 10px;
}

#gauche #milieu_gauche #milieu_droite #droite
{
display: inline-block;
vertical-align: top;
width: 23%;
}

select {
width: auto;
}

Merci pour votre aide
Modifié par valttt (06 May 2016 - 11:01)

Bonjour,

Tout simplement car ta déclaration

#gauche #milieu_gauche #milieu_droite #droite {
 display: inline-block;
 vertical-align: top;
 width: 23%;
}

est fausse !

Tu dois séparer tes identifiants par une virgule.

La virgule signifie le terme "ou" (edit: plutôt le terme "et"). Dans ton cas tu as écris "les enfants de droite enfants de milieu_droite enfants de...".

Le code attendu est

#gauche, #milieu_gauche, #milieu_droite, #droite {
 display: inline-block;
 vertical-align: top;
 width: 23%;
}

D'autre part l'utilisation du modèle de boite inline-block implique de bien maîtriser les espaces indésirables (article Alsa).
Modifié par Greg_Lumiere (06 May 2016 - 12:11)

Merci Greg, c'est déjà beaucoup mieux

Je vais essayer de mettre en forme les contenus pour que ce soit présentable.

Merci encore ...
Modifié par valttt (06 May 2016 - 11:57)

Sujet résolu....