28172 sujets

CSS et mise en forme, CSS3

Clear et plusieurs float

Bonjour,

Pour mettre une div dessous une div qui est flottant, on utilise la propriété "clear", si on à plusieurs "float" dans notre code css, la propriété "clear" prend en compte le premier "float" dans le document, et non le dernier, comme faire pour que "clear" soit seuleemnt appliqué au dernier "float" du document ?

Voici un exemple :


<div id="site">
    <div id="left">
        <p>Left</p>
        <p>Left</p>
        <p>Left</p>
   </div>

   <div id="content">
        <div id="divone">
            <p>Div one</p>
        </div>

        <div id="divtwo">
            <p>Div two</p>
        </div>
   </div>
</div>




       * {
            margin: 0;
            padding: 0;
        }

        #site {
            width: 960px;
            margin: auto;
        }

        #left {
            float: left;
 
        }

        #content {
            margin-left: 210px;
        }

        #divone {
            float: left;
            background: orange;
        }

        #divtwo {
            clear: left;
        }


J'aimerais que "divtwo" soit juste en dessous de "divone", mais ici il va se placer en dessous de "left", comment faire ?

Merci d'avance
bonjour,

donne une largeur au menu.

Modifie le contexte de formatage de #content :
pas margin-left , mais un overflow:hidden; sans donner aucune hauteur ni largeur .
ajouter un zoom:1; pour IE6 .

en gros : 
#left { 
            float: left; width:250px;
  
        } 
 
        #content { 
            overflow:hidden;zoom:1;
        }


Sinon , effectivement , quel interet de passer divone en float ... provoquer des defauts d'affichages ?
GC
Ah oups, j'ai oublié de mettre le reste du code dans #divone, j'a une deuxième div qui n'est pa s flottant.

Pourquoi en mettant un overflow cela fonctionne ???

Merci
gc-nomade a écrit :
....
Modifie le contexte de formatage de #content :
... overflow:hidden; sans donner aucune hauteur ni largeur .
ajouter un zoom:1; pour IE6 .
...

En modifiant le layout/contexte de formatage , tu force le navigateur a calculer plus precisement la position de chaque element qu'il rencontre dans le flux , leur dimension et leur interaction les uns avec les autres .

#content prenant deja en compte le flottant le precedent dans le flux , ces enfants directs n'auront plus aucune raison d'avoir aussi une interaction avec celui-ci , il se situeront dans et par rapport a la zone de #content .
#content prends en charge seul l'interaction avec ses elements adjacents dnas ce 'contexte' .

GC
Sujet clos
Aller à