Centrage de div en nombre variables

Voila je vous explique mon problème :

Je fais un formulaire. Donc je me suis construit une petite boite a la structure assez simple :

<div class="box">
  <div class="line">
    <label for="truc" class="line">Champ :</label>
    <input type="text" id="truc" class="line" name="valeur" value="" size="10">
  </div>
  (...autres lignes éventuelles...)
</div>

La classe box ressemble à ceci :

div.box {
  margin: auto;
  width: 30%;
}

et tout ca marche tres bien, ma belle boite de recherche est bien centrée.
Mais maintenant j'en mettrais bien une 2e à coté...
Donc je me dis pas de probleme un petit "display: inline;" et le tour est joué... mais pas du tout, ca ne marche pas, le 2e est affiché en dessous J'aimerais bien savoir pourquoi d'ailleurs...
Si je met un "float: left;" (ou right d'ailleurs) ils sont alors bien alignés mais plus du tout centrés.
Quelqu'un aurait-il une astuce pour réussir à avoir les 2 en même temps ?

Merci d'avance.

Bien sur je peux les mettre dans un div qui serait en margin:auto et sur lequel je mettrai la width, mais a ce moment la ca obligerait à utiliser une classe differente en fonction du nombre d'éléments contenus (pour la width) et donc cette structure ne serait plus générique, ce qui m'ennuie beaucoup...

Sans mettre un conteneur pour les 2 boites c'est pas facile !

Le display: inline ne marche que pour les listes il me semble. En tout cas pas pour les div.

Essaye de faire ca :
- largeur de la box : 30%
- les 2 : 60% donc reste 40%
- on divise par 4 (marge gauche, marge droite pour chaque box)
- sur div.box{margin: 0px 10%;)
- tu mets float: left; et clear:right;

et peut être que ca marche !


Edition Bonjour au fait et bienvenue !
Modifié par gilles6975 (20 May 2005 - 12:07)

Quelle solution as tu adopté ?