webleads-tracker

[résolu] clear:both; float bug ie7

Editions
Voici un petit bug qui m'a pris un peu de temps à résoudre, dont j'ai eu la solution ici http://covertprestige.info/css/float-depassement/page2.html
----------------
Le code en bas de page :
<div class="footer">
<div class="block widget widgetShortcutHeader">
</div>
<div class="block widget widgetLastElements actu">
</div>
<div class="block widget widgetLastElements actu">
</div>
<div class="block widget widgetLastElements">
</div>
<div class="block widget widgetLastElements">
</div>
<div class="art-footer-text widgetShortcutFooter mentionslégales">
</div>
</div>
Je voulais tous mes block en float:left; et mes mentions légales en bas de page (clear:both;)
ainsi j'avais les CSS suivant :
.footer .block {float:left;}
.footer .mentionslégales {clear:both}

exemple valide ce jour sur mon site de vente de confitures : http://confitures-et-biscuits.fr
----------------
Sous ie7 comportement bizarre, je ne voyais plus rien dés que le CSS clear:both; était actif....
---------------
La solution à été de déclarer le CSS suivant, dans le div encapsulant "footer" : .footer {overflow:auto;}

Manuel [Medialibs]
Avatar
En effet, la technique du overflow est fort bien pratique. De multiples infos sont disponibles sur le net : http://www.alsacreations.com/article/lire/7-depassement-flottants-css.html

Attention tout de même suivant les cas de figure : si un contenu dépasse son conteneur alors des scrollbars apparaitront avec la valeur "auto" tandis qu'il sera masquée avec une valeur "hidden".

Après il y a des alternatives solides : "display:inline-block" (avec hack ie6/7 pour assurer une compatibilité)
Formateur web [Medialibs]

Editions
oui ca fonctionne en effet impec et je ne n'y avait pas du tout pensé. A vrais dire je n'utilise pas trop ce CSS mais pourtant j'ai l'impression qu'il permet de faire pas mal de chose ;-)