[RESOLU] Vos techniques pour les conteneurs d'element flottant

Bonjour à tous,
Comment faites vous pour que le conteneur d'elements flottants s'adapte au contenu ?

Petite problématique en plus : votre page contient aussi un menu de gauche plus grand que votre conteneur.

Petit exemple :

#menu{
width:220px;
float:left;
}
#content{
margin-left:230px;
}
#content #conteneur{
background-color:#AAA;
padding:5px;
}
#content #conteneur .elementFlottant{
float:left;
width:50%;
}

Modifié par spiral123 (20 Apr 2010 - 12:15)

Je me permet de préciser :
L'ajout d'un element en clear:left adapte le contenu à la taille du menu de gauche.
L'ajout de overflow:auto; height:auto; a le bon comportement sauf sur ie6...

Avez vous une solution plus élégante pour ie6 que : les div paires en float:left et les div impaires en clear:right ?

Salut,

Comment éviter que mes éléments flottants (float) dépassent de leur conteneur ?
Éléments flottants qui dépassent de l'élément parent

EDIT :
Ton gabarit a l'air relativement simple, tu as jeté un coup d'œil à ceux d'Alsacreations ?
Modifié par BeliG (15 Apr 2010 - 17:40)

C'est juste pour simplifier l'exemple ^^

J'ai lu les articles que tu as mis en lien et la question reste ouverte pour ie6 ...

spiral123 a écrit :
L'ajout d'un element en clear:left adapte le contenu à la taille du menu de gauche.
L'ajout de overflow:auto; height:auto; a le bon comportement sauf sur ie6...

Avez vous une solution plus élégante pour ie6 que : les div paires en float:left et les div impaires en clear:right ?

Incompréhensible.

J'explique :
Si j'ajoute un <br> ou <hr> en clear:left dans mon conteneur, la hauteur du conteneur prend la taille du menu de gauche et non de son contenu.

Pour IE6, la seule solution que j'ai trouvé est :

<div id="conteneur">
    <div style="float:left">paire</div>
    <div style="clear:right">impaire</div>
    <div style="float:left">paire</div>
    <div style="clear:right">impaire</div>
</div>

Je me demandais donc si il y avait une meilleure manière de faire pour IE6
En espérant avoir été plus clair ^^

Je crois que tu t'embrouilles un peu les pinceaux...

A quoi correspondent ces éléments "paire" et "impaire" ? C'est pour faire une galerie ?

Quel résultat souhaites-tu obtenir ? (croquis, exemple en ligne, n'importe quoi de plus précis)

Une image vaut mieux que mille mots.

Le conteneur gris doit s'adapter avec le nombre d'éléments bleus (nombre non-connus à l'avance)

Hello,

En fait, tu voudrais obtenir des blocs de même hauteur ?

Parmi les gabarits proposés par BeliG, je crois qu'il y a exactement ce que tu cherches... mais as-tu visité son lien ?

spiral123 a écrit :
Le conteneur gris doit s'adapter avec le nombre d'éléments bleus (nombre non-connus à l'avance)

Si tes éléments bleus ont la même hauteur, tout simplement :

<div id="conteneur">
     <div class="boite"></div>
     <div class="boite"></div>
     <div class="boite"></div>
     <div class="boite"></div>
</div>

div#conteneur {
overflow:hidden; /*contexte de formatage*/}

div#conteneur div.boite {
float:left; /*on aligne les boites les unes à côté des autres*/
width:...; /*largeur*/
height:...; /*hauteur*/
margin:...; /*espacement*/}

Il ne reste plus qu'à calculer les marges (si besoin) en faisant attention à ce que :

(largeur boite) * 2 + marges <= largeur #conteneur

Si tu souhaites conserver une hauteur "fluide" pour tes boites (qui s'adapte à ce qu'elles contiennent), tu peux utiliser un spacer :

<div id="conteneur">
     <div class="boite"></div>
     <div class="boite"></div>

     <div class="spacer"></div>

     [...]
</div>

div.spacer { clear:both; }

Que contiennent ces éléments exactement ? Peut-être qu'une liste <ul> / <li> pourrait faire l'affaire (<ul> à la place de #conteneur, <li> à la place de .boite).

Je te conseille également de (re)lire cet article : http://openweb.eu.org/articles/initiation_float/. Tes problèmes relèvent avant tout d'un défaut de compréhension des bases du positionnement flottant.

EDIT : Oh, j'ai oublié de parler d'IE6. Une fois cette structure mise en place, voici quelques bugs courants que tu pourras rencontrer :
- le "3px jog",
- le "double margin",
- et un problème avec le spacer (si tu l'utilises)
Modifié par BeliG (16 Apr 2010 - 09:49)

Désolé de répondre si tard.
La solution que tu proposes fonctionne parfaitement avec tous les navigateurs sauf ie6 où le conteneur n'adapte pas sa hauteur.

:/

Je peux voir ton code (ou mieux une page en ligne avec le problème) ?

Le test est a faire avec ie6, l'arrière plan gris qui bug : http://s209746865.onlinehome.fr/testContainer/

:)

Tes éléments n'ont pas le layout.

- Pour corriger salement mais rapidement : ajouter un zoom:1 sur .conteneur,
- Pour corriger proprement : fixer les largeurs de .conteneur et .mainContent (valeurs de width autres que auto).

Voilà.

Parfait !
Merci beaucoup !