Layout complexe - pb de dépassement

Bonjour,

Le titre de mon sujet n'est pas des plus clair, j'en convient, mais le problème est assez complexe ... donc bon.

Si je simplifie un peu mon problème pour l'expliquer clairement, ça donne un truc comme ça :

j'ai un layout complexe fait de multiple div qui me permettent de positionner des éléments dans mon application.
Pour commencer, j'ai une div principale qui en englobe 11 autres. (le framework que j'utilise permet de faire sauter les div que je n'utilise pas).

grosso modo, ça ressemble un peu à ça :

________________________________________________________________________

Content Top

ContentA1 ContentA2 ContentA3

ContentB1 ContentB2 ContentB3

ContentC1 ContentC2 ContentC3

Content Bottom

________________________________________________________________________

chaque ligne de content est contenu dans un "content container"

j'utilise ainsi 4 classe CSS pour positionner tout ceci en utilisant le context css.
j'ai donc une classe contentContainer

.contentContainer
{
	width: 100%;
	margin: 10px 0px;	
	height: auto;
}

une classe contentLeft

.contentLeft
{
	float: left;
	margin: 0 10px;
}

une classe contentMiddle

.contentMiddle
{
	margin: 0 10px;
	overflow: hidden;
	width: auto;
}

et une classe contentRight

.contentRight
{
	float: right;
	margin: 0 10px;
	width: 33%;
	max-width:33%;
}

les éléments "1" ont la classe contentLeft
les éléments "2" ont la classe contentMiddle
les éléments "3" ont la classe contentRight
et les éléments "top" et "bottom" ont la classe contentMiddle

ma construction d'une ligne de 3 content ressemble à ceci :

<div class = contentContainer>
    <div class = contentLeft>

    </div>
    <div class = contentRight>

    </div>
    <div class = contentMiddle>

    </div>
</div>

si l'une de ces div n'existe pas (sauf la "C"), la ou les div restantes prennent toute la place disponible. Donc si je ne met un élément que dans A2 par exemple (et pas A1 et A3), A2 est censé prendre toute la ligne

Mon problème :

si j'ai un élément positionné dans une div de type "C" et qu'en dessous j'ai un élément positionné dans une div de type "middle", si le contenu de C est trop "haut" il déborde sur la div de dessous et empêche la div de type "middle" de prendre toute la largeur de la div. Ma div contentContainer qui contient l’élément middle s'étant bien sur toute la largeur, mais l'élément dans ma div middle non. Il est comme "bloqué" par la div de type C de l'élément qui se situe au dessus.

Existe t-il ici une solution pour que si la div de type C est trop grande (comprenez top haute) que le contentContainer de la div juste en dessous se positionne plus bas pour éviter se chevauchement ?

mon explication est peut être pas très clair et mon problème semble complexe. aussi je reste bien sûr à l'écoute pour donner les précisions nécessaires si besoin.

Cordialement

J'ai trouvé deux solutions à ce souci dont l'une donne un rendu plus acceptable que l'autre.

1. passer le contentContainer en Display : inline-block.
Cette solution présente deux désavantage :
- pas compatible IE 7
- les "blocs" vides occupent une place proportionnelle au margin et padding des sous éléments contenus

2. changer la div principale en tableau (et donc transformer tout les content container en <tr>)
au final, j'ai adopté cette solution qui malgré sont côté "tableau pour mettre en forme" permet d'avoir un rendu acceptable.

Je ne suis pas sûr qu'il existe d'autre solutions, mais sait-on jamais. Si un modérateur considère ce topic comme résolu, j'éditerai en conséquence, mais je ne suis pas totalement satisfait des solutions ici. Donc, si jamais quelqu'un à une autre solutions je suis à l'écoute