Input dans un display:table-cell

Bonjour,
Je voudrais faire ce formulaire de saisie qui suit, les tirets et les points ne sont là que pour remplacer des blancs qui ne s'affichent pas dans les messages du forum afin de ne pas avoir de décalage dans ma présentation.
Il n'y a que les traits horizontaux et verticaux autour des Select et Zones input qui doivent être des cadres.

/*
---------------------------------------------------------------------------
|............................Titre caption ...............................|
---------------------------------------------------------------------------
|.................|...|.....Titre saisie 1.....|...|....Titre saisie 2....|
|--------------------------------------------------------------------------
| --------------- |...| ---------------------- |...| -------------------- |
| | Select 1a ..| |...| | Zone 1a input .....| |...| | Zone 2a input ...| |
| | Select 1b ..| |...| | Zone 1b input .....| |...| | Zone 2b input ...| |
| --------------- |...| | Zone 1c input .....| |...| | Zone 2c input ...| |
|.................|...| | Zone 1d input .....| |...| | Zone 2d input ...| |
|.................|...| | Zone 1d input .....| |...| | Zone 2d input ...| |
|.................|...| ---------------------- |...| | Zone 2e input ...| |
|.................|...| ...................... |...| | Zone 2f input ...| |
| Bouton 1 .......|...| ...................... |...| | Zone 2d input ...| |
| Bouton 2 .......|...| ...................... |...| -------------------- |
---------------------------------------------------------------------------
*/

J'ai commencé par faire des div afin de positionner en css tous ces éléments, mais après avoir fait différents essais avec les block, inline, float, etc ... c'est la vrai galère et je n'y arrive pas.
Alors j'ai essayé les display: table, table-row et table-cell, et là j'ai pu obtenir, en les matérialisant avec des cadres provisoires, le bon emplacement de chacun des éléments avec leur largeur et hauteur

correspondantes à ce que j'ai déclaré dans le css, donc là tout va bien.
J'ai pu également placer le Titre caption et les Titre saisie où je voulais.
Mais lorsque j'ai voulu placer un select sur la colonne gauche et/ou un input sur la colonne du milieu, ces zones se placent automatiquement au milieu vertical de la pseudo cellule !! et de plus ma pseudo cellule se retrouve avec une hauteur plus importante que celle que j'ai déclaré.

J'ai tout essayé avec des margin: 0, vertical-align: top, rien n'y fait.

Avez vous une idée pour placer ces premières zones tout en haut de la cellule ?? (note : un input suivant se place bien à la suite du précédent)

Et peut on faire un cadre tracé dans une cellule ?

Sinon je vais tout reprendre avec des position:absolute, mais je pense que ce n'est pas une bonne solution.
Merci de vos réponses.

Bon apparemment mon "dessin" ne s'affiche pas comme je le souhaitais, j'espère que vous comprendrez, 2 lignes en haut puis une troisième avec 3 colonnes
EDIT par Felipe: je l'ai mis dans une balise code pour que la fonte soit monospace
Modifié par Felipe (11 May 2013 - 21:11)

Et voilà le code :

	<div id='conteneur'>
	  <div id='titrentete'>Titre entête
	  </div> 
	  <div id='titrechoix'>
            <div id='choixgauche'>
            </div>   
            <div id='choixintergauche'> 
            </div>  
            <div id='choixcentre'>Titre saisie 1 
            </div>  
            <div id='choixinterdroit'> 
            </div> 
            <div id='choixdroit'>Titre saisie 2
            </div> 
	  </div>   
	  <div id='saisiechoix'> 
            <div id='saisiegauche'> 
              <p><label id='enhaut' class='lab_gauche' for='type'>Type : </label> 
	      <select id='type' name=type>
                <option>toto</option>     
              </select></p>
	      <p><label class='lab_gauche' for='test'>Test : </label>
              <input id='test' name='test'>
            </div>
            <div id='saisieintergauche'> 
            </div> 
            <div id='saisiecentre'> 
		<p><label class='lab_gauche' for='test'>Test : </label> 
                <input id='test' name='test'> 
            </div> 
            <div id='saisieinterdroit'> 
            </div> 
            <div id='saisiedroit' 
            </div>");   
	  </div>
	</div>

#conteneur {                 /* Conteneur div principal */
   display: table;
   width: 990px;
	height: 600px;
	border: 1px solid black;
	margin: 0 auto;
}

#titrentete {                 /* Conteneur div du titre entête */
   display: table-caption;
   width: 990px;
	height: 30px;
/*	border: 1px solid black;*/
	padding-top: 3px;
	padding-bottom: 3px;
	font-family: Mistral;
	font-size: 1.5em;
	text-align: center;
}

#titrechoix {                /* Conteneur div titre des choix */
   display: table-row;
   width: 990px;
	height: 20px;
	text-align : center;
/*	vertical-align: bottom;*/
	font-family: Mistral;
	font-size: 1.5em;
/*	border: 1px solid black;*/
	padding-top: 3px;
}

#choixgauche {               /* Conteneur div gauche titre des choix */
   display: table-cell;
   width: 250px;
	height: 20px;
/*	border: 1px solid black;*/
}

#choixintergauche {          /* Conteneur div inter gauche titre des choix */
   display: table-cell;
   width: 50px;
	height: 20px;
/*	border: 1px solid black;*/
}
#choixcentre {               /* Conteneur div centre titre des choix */
   display: table-cell;
   width: 320px;
	height: 50px;
/*	border: 1px solid black;*/
}

#choixinterdroit {           /* Conteneur div inter droit titre des choix */
   display: table-cell;
   width: 50px;
	height: 50px;
/*	border: 1px solid black;*/
}

Merci de vos lumières

En fait ma question se résume à :

Comment positionner un input ou un select dans une table-cell en css et que cette pseudo cellule conserve sa hauteur déclarée ??

Merci

Bonjour,

j'ai édité ton post et placé le code dans un fiddle: http://jsfiddle.net/kkf5h/1/ parce que j'ai du mal à comprendre quel est ton problème. Et je comprend toujours pas : à quoi servent les input test1 et 2 ? Devraient-ils être au centre et à droite ?

Un contenu dans une cellule ne change rien à sa hauteur, à moins qu'il ne soit plus haut que ce que tu fixes je pense.
Ah si, en mettant sur l'élément parent affiché comme table l'instruction : table-layout: fixed tu changes complètement d'algorithme de rendu tabulaire. Au lieu de s'adapter en priorité à ton contenu et ensuite à ce que tu lui dis en CSS, le navigateur respectera scrupuleusement les instructions CSS, par exemple width: 50% pour 2 colonnes alors qu'il y a 10 fois plus de contenu dans l'une que dans l'autre.
Pour la hauteur, c'est probablement pas aussi rigoureux que la largeur et j'ai pas trop creusé la question : en général je me sers du rendu tabulaire pour profiter de la souplesse de calcul des hauteurs par le navigateur, pas pour lui imposer des trucs au détriment du contenu réel

Voilà en dessin un peu plus visuel le résultat que je veux obtenir.



Je pense que la solution du placement en table n'est pas judicieux et que la solution est de placer tous ces blocs encadré à l'écran par du css float.

Mais comment ? quand faut il mettre les float right, left, clear both, etc ... pour que tout se place bien comme il faut ??

Merci de votre aide.