Float et Clear, rétablir le flux...?

Bonjour,

Après de nombreux essais en tout genres et différentes recherches je n'ai toujours pas trouvé réponse à ma question.
C'est pourquoi je me résigne à chercher de l'aide (pourtant je n'aime pas rester sur une "échec...")

Le soucis est simple (ci-jointe capture écran...)

Description du problème :
En fait je vourais inclure une liste de bloc (div) en float left dans un conteneur qui est entre
2 colonnes toutes les 2 en float left et right (mais en dessous dans le code...)
Comme sur le gabarit de la capture.

J'inclus donc mes bloc et pour terminer chaque ligne je fais un <br clear:left /> et là....
tout passe en dessous du menu à gauche qui est en float:left

J'ai cherché pour rétablir un flux après un float mais je n'ai rien trouvé concernant mon "soucis"...
Du coup je ne sais pas trop comment faire pour qu'il soit possible d'ajouter des éléments en float dans le conteneur central
et des clear sans que le tout passe sous le menu de gauche....

Si quelqu'un à une piste je suis preneur...

Votre site est super, j'ai appris énormément de chose grâce à celui-ci !



Modifié par pgk37 (29 Mar 2008 - 18:07)

Salut pgk37 et bienvenue ,

à priori un problème de contexte de formatage mais ça serait nettement plus facile avec une page en ligne ou à défaut le code complet (css + html) ...

A+

Salut Heyoan,

Et tout d'abord merci pour ta réponse, je vais aller consulter le lien que tu m'as indiqué

Pour ce qui est du code voici l'URL de la maquette de test :
http://pgk37.free.fr/test_float/

Je suis reparti d'un template de cette page
http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS

Voilà si le code complet peut t'aider...
je vais creuser le contexte de formatage dont tu m'as parlé.

Merci

Je viens de lire l'article, je pense avoir compris...
mais par contre existe-t-il un exemple similaire à ce que je cherche à réaliser ?
(ce qui doit être assez commun comme mise en page...)
et surtout un exemple où le contexte de formatage fonctionne sur IE et Firefox ?

L'idéal quoi....

http://www.blog-and-blues.org/articles/Float%2C_clear_et_contextes_de_formatage a écrit :
Qu'est-ce qu'un contexte de formatage ?

En effet, selon CSS2.1, à propos de la propriété clear :

Cette propriété indique quels côtés de la (ou des) boîte(s) d'un élément ne doivent pas être adjacents à une boîte flottante précédente. La propriété 'clear' ne prend pas en compte les flottants se trouvant dans l'élément lui-même, ni ceux appartenant à d'autres contextes de formatage bloc.

Comment créer ce contexte de formatage bloc ?

Les flottants, les éléments en positionnement absolu, les inline-blocks, les table-cells et les éléments dont la propriété overflow a une valeur autre que visible établissent de nouveaux contextes de formatage bloc.

Nous connaissons donc à présent les propriétés à utiliser sur notre conteneur :

* float:left et float:right (qui ne sont pas forcément adaptés aux contraintes de la structure concernée)
* position:absolute et position:fixed (qui ont de fortes chances de l'être encore moins)
* overflow:auto, overflow:hidden (et pour mémoire overflow:scroll), qui permettent également d'étendre le calcul de hauteur du conteneur à ses enfants flottants, ce qui peut s'avérer particulièrement intéressant pour faire d'une pierre deux coups dans certains cas de mise en plage plus complexes.
* display:table-cell qui modifiera le mode de calcul de la largeur du conteneur (il s'adaptera à son contenu) mais qui offre par ailleurs des possibilités de centrage vertical très aisé.
* display:inline-block pour lequel nous allons hélas butter sur de sérieux problèmes d'implémentation.

Qu'en est-il en effet du support de ce mécanisme dans les différents navigateurs graphiques modernes ?
Le support des propriétés générant un contexte de formatage

Les navigateurs habituellement conformes à CSS2.1 n'implémentent pas tous correctement toutes ces propriétés (comme en témoigne cette page test : Float, clear et contextes de formatage bloc) :

* Opera 8.x appliquera toutes les propriétés ci-dessus de manière correcte pour limiter l'effet du clear. Cependant, il faudra attendre la version d'Opera9.0 (actuellement au stade de preview) pour que les display:inline-block ne posent plus, par ailleurs, des problèmes d'alignement vertical dans ce navigateur.
* Firefox appliquera comme prévu les propriétés ci-dessus pour limiter l'effet de clear, à l'exception du display:inline-block, non implémenté.
* Safari agira comme prévu, sauf pour display:table-cell qui semble empêcher le conteneur de se placer à côté du flottant vert.
* Konqueror semble agir comme prévu dans tous les cas (à confirmer).

Dans tous ces navigateurs conformes, on pourra donc généralement maîtriser l'effet d'un clear à l'aide d'un overflow. Par exemple :

#wrapper-context {
overflow: auto;
}

Le cas particulier d'Internet Explorer 5.x et 6.0 Windows

Comme souvent, IE5.x-6.0 Windows souffre de ses implémentations partielles de CSS2, agravé par le conflit entre modèle de rendu CSS et haslayout :

* IE ne crée aucun contexte de formatage bloc appliquable à la propriété clear, au sens de CSS2.1, quelque-soit la propriété utilisée.
* Mais il en reproduit le comportement via les propriétés dotant le conteneur de haslayout (voir ce test : Float et haslayout (2)) :
o Certaines coïncident avec les moins intéressantes des propriétés ci-dessus : position:absolute et float, ainsi que display:inline-block.
o Les autres sont width et heigth (quelque-soit la valeur), ainsi que zoom (extension CSS Microsoft, implémentée à partir d'IE5.5, à utiliser dans une feuille de style en commentaires conditionnels).
* Il parviendra également au même effet si le conteneur est un tableau table (doté de haslayout par défaut).

Notons que la pre-version bêta 2 d'IE7 se comporte exactement comme IE6.0 dans ce domaine précis.

Concrètement, et pour compléter le style précédent, on aura donc fréquement recours à un height:1% ou à un zoom:1 (si le rendu dans IE5.0 n'est pas problématique), placés dans une feuille de style du type :

<!--[if lte IE 6]>
<style type="text/css">
#wrapper-context {
height: 1%;
}
</style>
<![endif]-->

Il pourrait naturellement tout aussi bien s'agir d'une feuille de style externe. Lue uniquement par Internet Explorer Windows 5.x et 6.0, cette feuille de style en commentaires conditionnels complètera le style précédent, et lui permettra de reproduire le comportement des navigateurs conformes.

en résumé et tout cru:
overflow:hidden; /* ou auto */
et
height:1%; /* ou zoom:1;*/

a #centre en enlevant les marges laterales.

(lire et relire ... )

GC

bonjour
l'utilisation du clear:left pour "passer à la ligne" peut aisément être remplacée par la création d'une div contenant les boites à laquelle on attribue une largeur juste suffisante pour mettre les trois boites (attention:margin border et padding compris)

inutile aussi de répéter : div class=floatleft

<div id="boites">
<div>Boite 01</div>
<div>Boite 02</div>
<div>Boite 03</div>
<div>Boite 01</div>
<div>Boite 02</div>
<div>Boite 03</div>
<div>Boite 01</div>
<div>Boite 02</div>
<div>Boite 03</div>
</div>

#boites{
width: 180px; /*valeur à calculer en fonction de la dimension des boites*/
}
#boites div{ /*désigne toutes les div se trouvant dans la div #boites*/
float:left; 
}

Bonsoir,

et merci à tous pour vos réponses suggestions, et votre réactivité !
ça fait plaisir du monde qui s'intéresse à ce sujet

J'ai donc testé comme ceci (pour ceux que cela intéresse)
sur le div contenant les boite en Float left :
overflow-x: hidden;
overflow-y: hidden;
height: 1%;

Test passés avec succès sur :
- IE 6 et 7 , et Firefox PC
- Firefox Mac et SAFARI Mac

Visible à l'adresse :
http://pgk37.free.fr/test_float/

Je retiens donc cette solution qui semble convenir !
Si jamais j'ai un soucis je vous en ferai part mais tout devrait rouler comme ça
(sauf surprises....je me méfie avec IE !!!)

Verdan,

je vais également testé ta solution de conteneur pour les boites et éviter ainsi les
<br clear:left /> redondant et inutile du coup.

Cela sera bénéfique pour la légèreté du code également

Merci pour l'astuce en tout cas