Succesion de blocs dans le flux sans chevauchement [resolu]

Je croyais commencer à comprendre un peu les modèles des boites en CSS2, mais ,,,,

J'ai une structure de blocs class="ligne" qui se succèdent

<div class="ligne">
	<div class="saisie">
		<input />
	</div>
	<div class="saisieSup"> <!--  inline-block  -->
		<input />
	</div> 
</div> <!--   class="ligne"  -->
<hr /> <!--  clear: both  -->

Mon problème est que lors d'un redimensionnement d'écran (taille plus petite ,,,) ces blocs se chevauchent au lieu de succéder,
Le <hr /> rajouté en séparateur de blocs n'est qu'une tentative désespérée pour obliger les blocs à se succéder, mais c'est raté !

Il me semblait avoir compris que la hauteur des blocs <div> était déterminée par celle de leur contenu, (Raphaël Goetter – CSS2 – p, 109), ce qu'en vérité je retrouve mal dans http://www.yoyodesign.org/doc/w3c/css2/visuren.html#containing-block, « Chaque boîte se voit attribuer une position vis-à-vis de son bloc conteneur, celle-ci n'est pas forcément confinée à l'intérieur de ce conteneur et peut en déborder  » 

Mes blocs <class= "ligne"> sont des <div> - J'ai essayé d'utiliser des blocs <p> sans changement,
Lequel serait le plus logique ?[code]
Modifié par softdaemon (21 Mar 2010 - 10:51)

Bonjour et bienvenue

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.



Modifié par Hermann (20 Mar 2010 - 12:46)

Pas très clair... Pour pouvoir te dire si ton code est pertinent tu dois fournir au moins ton contenu exacte voire la totalité du code (x)HTML ou mieux une page en ligne.
D'autre part tu oublies de donner le CSS associé.
Sur quels navigateurs rencontres tu ce problème?
Modifié par Hermann (20 Mar 2010 - 12:53)

J'ai extrait l'essentiel pour une demo dynamique
voir la demo dans (plus en ligne)
Merci
PS J'avais cru bien mettre la balise mais le fonctionnement n'était pas celui que j'attendais
Excusez-moi !!!!
Modifié par softdaemon (24 Mar 2010 - 14:54)

Bonjour,

Les contenus dépassent de test <div class="ligne"> parce que tu as figé la hauteur de ces derniers avec un height:1.5em.

Tu demandes une hauteur précise, tu l'obtiens. Et tout ce qui dépasse... dépasse.

Donc il faut supprimer ce height. Sauf que tu te retrouves avec un problème: certains contenus débordent de leur conteneur. Je suppose d'ailleurs que c'est à cause de ce problème qu'un height assassin a été utilisé. Ce n'est pas une solution, il vaut mieux traiter le problème à la racine. Et ce problème, c'est que les éléments flottants débordent de leur conteneur; c'est normal, ça fonctionne comme ça (par défaut), on appelle ça le dépassement des flottants (ou autres noms poétiques). Une des manières d'éviter ça est d'utiliser un overflow:hidden sur le conteneur pour créer un contexte de formatage qui va empêcher le dépassement des flottants. Désolé si c'est un peu cryptique.

Dernier mystère: pourquoi ça marche bien dans Internet Explorer (7, 8, 9...)? C'est parce qu'Internet Explorer n'affiche pas ta page en mode «respect des standards», mais en mode «ah tiens, voilà une page du siècle dernier», aussi appelé mode Quirks. Le responsable est le Doctype tronqué que tu utilises. Voir du côté de cet outil pour un Doctype en bonne et due forme: http://www.alsacreations.com/page/squelettor/

Je récapitule:
- Remplacer le Doctype par un Doctype en bonne et due forme (en restant sur du HTML4 Transitional, pourquoi pas).
- Supprimer les height:1.5em.
- Utiliser overflow:hidden pour arrêter le dépassement des flottants.

Tu "rentabilise" largement le temps passé à préparer mes pages de test.
J'ai relu et (j'espère !) enregistré l'article http://www.alsacreations.com/article/lire/560-DTD-comment-choisir.html.
J'avais déjà du lire ça quelque part, mais cela m'était sorti de l'esprit.

Pour le reste j'aurais quand même dû mieux me relire et d'autres indices auraient dû m'y faire penser (dans le projet complet). Merci de me l'avoir redit si simplement !

Cordialement