Mon table-row se comporte bizarement

Bonjour à tous,

Je croyais avoir à peu près compris l'utilisation du display:table, table-cell et table-row et je l'ai déjà utilisé plusieurs fois avec succès. Pourtant j'ai pour ce nouveau site un rendu qui me parait illogique.
Mon but est de faire 2 blocs cote à cote dimensionnables et un 3ème en dessous qui est de la largeur des 2 du dessus.

Voici mon code :

section {
	border:#0000ff solid 1px;
	display:table;
}
#diapoA {
	width:200px;
	height : 200px;
	display:table-cell;
	border:#ff0000 solid 1px;
}
#texte {
	width: 400px;
	display:table-cell;
	padding: 10px;
	font-size:0.9em;
	border:#ff0000 solid 1px;
}
#promos {
	display:table-row;
	padding: 10px;
	background:#f7d2ac;
	border:#ff0000 solid 1px;
}

<section>
	<div id="diapoA">
    zone diapo zone diapo zone diapo zone diapo zone diapo zone diapo zone diapo zone diapo
    </div>     
    <div id="texte">
    	<? echo "$te_presentation"; ?>
    </div>
    <div id="promos">
    zone promos zone promos zone promos zone promos zone promos zone promos zone promos
    </div>
</section>

Je ne comprend pas pourquoi la div #promos qui est en display:table-row ne prend pas toute la largeur. En fait ce n'est pas tout à fait vrai, elle occupe bien toute la largeur, c'est ce que me dit l'inspecteur d'élément du navigateur, mais le texte qui est dedans ainsi que le background reste de la largeur du table-cell du dessus.
En plus il y a d'autres dysfonctionnements sur cette div : le padding ne s'applique pas et le border non plus.

Voici un printscreen :



Je cherche depuis plusieurs jours en essayant différents trucs. Si quelqu'un peut m'expliquer ....

Le comportement parait plutôt logique au contraire si on compare au table/tr/td
row = tr de tableau
cell = cellule de tableau.

Il faut juste ajouter un conteneur sur diapoA et texte avec un display:table-row.

Ca simule du coup 2 lignes de tableau !

Merci de ta réponse Cgaybeul.
Je croyais au contraire que le display tabulaire évitait de construire un tableau comme en HTML en créant automatiquement les "éléments anonymes" qui manquent.
De toute façon j'ai essayé et ça ne change rien. Ni en enchassant les table-cell dans un table-row, ni en insérant un table-row vide en dessous.

Essaye avec ça :

    <style>section {
	border:#0000ff solid 1px;
	display:table;
}
#lespromos, #diapos {
	display:table; width: 100%;
}
#diapoA {
	width:200px;
	height : 200px;
	display:table-cell;
	border:#ff0000 solid 1px;
}
#texte {
	width: 400px;
	display:table-cell;
	padding: 10px;
	font-size:0.9em;
	border:#ff0000 solid 1px;
}
#promos {
	display:table-cell;
	padding: 10px;
	background:#f7d2ac;
	border:#ff0000 solid 1px;
}</style>

    <section>
	<div id=\"diapos\">
	<div id=\"diapoA\">
    zone diapo zone diapo zone diapo zone diapo zone diapo zone diapo zone diapo zone diapo
    </div>     
    <div id=\"texte\">
    	TEXTE
    </div>
    </div>
    <div id=\"lespromos\">
    <div id=\"promos\">
    zone promos zone promos zone promos zone promos zone promos zone promos zone promos
    </div>
    </div>
</section>

Apparement pour ça il ne faut pas utiliser table-row mais mettre tes deux div en display: table.

Après il y a aussi la solution du display flex mais qui necessite du js pour les IE < 10 !

Oui merci de ta solution effectivement ça marche. Mais imbriquer des div en cascade pour pas grand chose me semble toujours du gaspillage. Du coup j'ai fait à peu près pareil simplement en sortant #promos du "table" (la <section>).

Mais ça ne m'explique pas pourquoi un table-row ne se comporte pas en 'rangée". C'est où que j'ai raté quelque chose ? C'est quelle info que je n'ai pas lu ?
J'en conclu que les display : table ne peuvent comporter soit que des table-row ou des table-cell ou des table-colum mais que si on veut mixer table-cell et table-row il faut changer de "table". Quelqu'un peut-il me confirmer mon raisonnement ou j'ai tout faux ?

(je ne met pas encore le sujet en résolu pour avoir cette réponse)