28220 sujets

CSS et mise en forme, CSS3

Positionnement : problème de hauteur de div flottant

Bonjour à tous Smiley smile

Actuellement, je butte sur un problème de positionnement en css.
Pour vous aider à mieux comprendre, j'ai fais un petit dessin ainsi qu'un screenshot.

Le screen de ce que j'ai actuellement

Et ce que j'aimerais obtenir

- boite 1 est un div qui a une largeur non spécifiée (sa largeur varie en fonction de la largeur du browser).
- boite 2 est en fait une image que je fais flotter afin que du texte puisse s'écrire à droite de cette image et sur toute la hauteur de cette image. La largeur et la hauteur de cette image sont fixes (c'est l'avatar sur mon screen)

Mon problème se situe au niveau de la boite 3 (celle qui peut contenir du code php).
En effet, cette boite peut etre là, tout comme elle ne peut etre la, et je ne sais jamais à quel niveau elle peut apparaitre.
Donc si cette boite apparait plus bas que boite 2 (l'avatar), aucun problème, boite 3 occupe 95% de la largeur de boite 1.

En revanche, si boite 3 (le code php) apparait au meme niveau que boite 2 (l'avatar), comme boite 2 "float", boite 3 occupe toujours 95% de boite 1, mais le texte de boite 3 se retrouve avec une partie en "alinéa".

En gros, si la boite 3 apparait au niveau de la boite 2, j'aimerais bien éviter cet "alinéa".
C'est peut etre possible en faisant en sorte que la boite 2 occupe la meme hauteur que la boite 3 non ? Mais boite 2 float Smiley ohwell

Avez vous une idée ?
Merci Smiley cligne
Voila Smiley smile 

<div style="margin: auto; background: #C3C8D4; color: #000000; margin-bottom: 2px; padding-top: 2px; padding-bottom: 2px; padding-left: 5px; padding-right: 5px;">
	<div style="float: left; font-weight: bold">LA GLOBULE</div>
	<div style="text-align: right; color: #404966">le 09/10/2005 à 19:06</div>
</div>
<div style="margin: auto; background: #E9ECF3; padding-left: 5px; padding-right: 5px; padding-top: 2px; padding-bottom: 5px; margin-bottom: 2px;">
	<div style="float: left; margin-left: 5px; margin-right: 10px; margin-top: 6px">
		<img src="http://site_v4/images/avatar/1.gif" style="border: solid #000000 1px" />
	</div>
	<div class="post">
		moogli_garagiste le tous c'est d'avoir les idées qui vont bien [cligne]
		Erazer et les compétences qui suivent. mais appriori, ce n'est pas un problème pour LA_GLOBULE :>
		Erazer ? [smile]
		<?php
		echo '<div class="code code_php">';
		echo $highlight->texte;
		echo '</div>';
		?>
		LA_GLOBULE c pas tres dur de faire un forum [smile]
		Erazer bien rien n'est dur en php
		Erazer mais le faire bien et propre, c'est autre chose
		Erazer tu utilises un moteur de template LA_GLOBULE?
	</div>
</div>


En ce qui concerne les classes code et code_php, elles contiennent juste les styles pour la couleur de fond du code php, les bordures et la police.

Pour .post, j'ai :
#texte .post  { height: 70px; }

html>body #texte .post { height: auto; min-height: 70px; }


Merci encore.
Bonjour,

Doter la boîte en question d'une marge gauche équivalente ou supérieure à la largeur de l'image.

Sinon, à voir l'extrait de code ci-dessus : attention, l'élément <div> n'est pas destiné à remplacer tous les éléments HTML spécifiques, tels que les titres (LA GLOBULE), l'élément <pre> (le code PHP), etc.
Ce n'est pas vraiment la réponse que j'attendais Smiley confus

Au pire, je collerais l'avatar à droite.

En ce qui concerne la sémantique, je suis tout à fait d'accord avec toi, mais en ce qui concerne le code PHP, je ne veux pas utiliser la balise <pre>, et ce, pour une simple raison : permettre les retours chariots si le code est trop "large".

Mais merci de vous etre penché sur mon problème Smiley smile
Re-bonjour

Pour l'élément flanquant le float, j'avoue ne pas voir où serait le problème ? La marge d'un élément flanquant un flottant est le mécanisme normal pour éviter à son contenu trop long de s'écouler en dessous du flottant... Ce qui est exactement ce que tu cherches à faire, sauf erreur. Peut-être est-ce le comportement buggé d'IE sur ce point qui te confuse un peu ?

La propriété white-space permet de gérer finement les espaces et les retours à la ligne dans les blocs <pre>
Sujet clos
Aller à