[REGLE] Du texte qui "pousse" un div...

Bonjour,

Je me permets de poster car je ne trouve décidément pas la solution à ce problème totalement incongru.

J'ai une série de divs, en dessous les uns des autres par deux.
Un qui flotte à gauche, un autre avec un margin adéquat et un clear, pour que le suivant flotte à gauche à la ligne.

En gros, au niveau HTML ça donne ça :

<div class="bubblepicto">
    <img src="picto.png" alt="Titre Picto" /><br />
    <span class="pictotitle">Titre Picto</span>
</div>
<div class="bubblebox">
    <h2><img src="ImageTitre.png" alt="Titre image">&nbsp;</h2>
    <div class="body">
        Contenu de ma boite graphique avec du texte et tout et tout
    </div>
    <div class="footer">
    </div>
</div>

Un peu de CSS :

.bubblebox .body {
	background: url('body.png') repeat-y left;
	margin: 0px;
	width: 440px;
	padding: 0px 15px 0px 25px;
	margin-left: -5px;
	line-height: 18px;
}

.bubblebox h2 {
	background: url('header;png') no-repeat top left;
	margin: 0px;
	padding: 5px 0px 0px 23px;
	height: 19px;
	margin-left: -5px;
}

bubblebox .footer {
	background: url('footer.png') no-repeat top left;
	margin: 0px;
	margin-left: -5px;
}

.bubblepicto {
	float: left;
	position: relative;
	width: 60px;
	text-align: left;
	line-height: 10px;
	padding-top: 10px;
}

Mon problème est le suivant : il arrive que le div de gauche soit plus haut que celui de droite (image + titre plus haut que header + body). Dans ces cas là, le div footer se trouve décalé vers le bas de la hauteur du titre de l'image... Ce qui crée un espace entre le body et le footer (et donc un trou dans ma boite graphique au niveau du bord dessiné par les images de fond).
Du coup, je ne peux pas contrôler cet espacement, because il n'est dû à aucun problème de margin ou de padding, mais à un texte qui se trouve dans un autre div qui flotte... et dont je ne pensais pas qu'il aurait cette conséquence...

Est-ce que c'est mon code HTML qui est mal foutu, ou mon CSS qui ne prend pas certaines choses en compte ?

Merci d'avance à qui pourra me donner un début de solution, une piste à creuser... Et bon appétit.
Modifié par Eterneige (06 Nov 2008 - 16:28)

C'est à priori ton découpage qui est mal fait, car il ne prend pas en compte cette possibilité. Si tu as une image de fond à afficher sur toute la hauteur d'un contenu composé de plusieurs éléments, mieux vaut l'appliquer à un conteneur plutôt qu'à chacun des éléments en question.

Difficile d'en dire plus sans voir la page qui pose problème et/ou le design à réaliser.

Salut,

Merci d'avoir pris du temps pour répondre.
J'ai finalement fait autrement... La contrainte est que je ne peux pas appliquer une image au conteneur, puisque celui-ci peut être de hauteur très variable (de 2 ou 3 lignes à plusieurs paragraphes).
J'ai maintenant une liste d'items, un clear:both, sur les li, et mes deux blocs qui flottent l'un à gauche, l'autre à droite. Et comme ça, ça passe...

Ca me donne d'autres problèmes (notamment sur Webkit), mais pour ça, c'est réglé...