J'ai suivi du code CSS et mes flotteurs abandonnent leurs conteneurs. Firefox n'a pas ce problème. Quelle pourrait être une raison pour ce comportement?
<div class="container">
<div class="leftmenu">
... some stuff here ...
</div>
<div class="rightmenu">
<div style="float: right; text-align: right;">
<button class="ui-state-disabled ui-state-default ui-corner-all"> Button 1 </button>
<button class="ui-state-disabled ui-state-default ui-corner-all"> Button 2 </button>
<button class="ui-state-disabled ui-state-default ui-corner-all"> Button 3 </button>
<button class="ui-state-disabled ui-state-default ui-corner-all"> Button 4 </button>
</div>
</div>
</div>
7 Réponses :
Mettez ce code dans le bas de la #RightMenu DIV:
<span style="clear:both;"></span>
Le conteneur, dans votre cas "Div.Container", ne sera pas en mesure de calculer la bonne hauteur de soi une fois que ses enfants sont flottés. S'il y a des blocs d'enfants qui ne sont pas flottés, le conteneur utilisera la hauteur du plus grand d'entre eux.
Un conteneur avec les deux blocs d'enfant flottés est de toute façon commune. Il existe certaines façons de résoudre ce problème. Considérez les approches résumées par Quirksmode le meilleur. http://www.quirksmode.org/css/clearing.html P >
Donc, pour résoudre votre problème, ajoutez-le simplement dans votre fichier CSS. P>
.clearfix {
*zoom: 1;
}
.clearfix::before,
.clearfix::after {
display: table;
content: "";
}
.clearfix::after {
clear: both;
}
Donner au conteneur une largeur explicite était la clé pour moi. Réponse très utile, merci!
La largeur semblait le faire pour moi aussi! Réponse élégante @nil
Dans certains cas rares, le
<div class="leftmenu"> ... some stuff here ... </div> <div class="rightmenu"> ... some stuff here ... </div> <div class="clear"></div>
Le droit DIV n'est pas de hauteur car il ne contient que des éléments flottés qui n'ont pas de hauteur elles-mêmes.
Pour effacer l'utilisation du flotteur Overflow: caché effacera le flotteur pour Firefox, safari et chrome. Le zoom: 1 invoque haslayout pour IE6 / IE7. Le Color de l'arrière-plan: #ccc est juste pour que vous puissiez voir que la div contient les flotteurs.
Sans savoir ce que font les classes "gauchermenu" et "RightMenu", il est difficile de déterminer votre problème exact, mais essayez d'ajouter débordement: caché; à n'importe quel élément n'est pas flotté, mais a flotté enfants. I.e.: Div.RightMenu dans l'exemple et toute autre règle de votre CSS.
Ceci fonctionne:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<body>
<div class="container">
<div class="leftmenu">
... some stuff here ...
</div>
<div class="rightmenu" style="padding-bottom: 5px !ie; border: 1px solid black;">
<div style="float: right; text-align: right;">
<button style="display: inline-block;" class="ui-state-disabled ui-state-default ui-corner-all"> Button 1 </button>
<button class="ui-state-disabled ui-state-default ui-corner-all"> Button 2 </button>
<button class="ui-state-disabled ui-state-default ui-corner-all"> Button 3 </button>
<button class="ui-state-disabled ui-state-default ui-corner-all"> Button 4 </button>
</div>
<br style="clear: both;" />
</div>
</div>
</body>
</html>
.container {
overflow: auto;
}
Does the trick.
Intéressant. Cela devrait arriver à Firefox aussi.
Personne ne semble comprendre quel est le problème. Quel conteneur sont les flotteurs qui tombent? Quelques solutions ci-dessous fixeront le problème «RightMenu» s'effondrant, mais vous les appliquez mal ou nous répondons tous à la mauvaise question. Avez-vous un lien vers un site en direct?
Emily a raison. Un site en direct ou au moins un exemple complet serait très utile. Au moins, vous pourriez être capable de fournir des coups d'écran.
D'accord. Je pense que certains examens d'écran de plusieurs navigateurs nous aideraient à tous ou à un lien vers un site en direct.
-1 à cette question. Ce n'est pas clair. Quoi qu'il en soit, une boîte flottée est retirée du flux, de sorte que cela n'affecte donc pas les boîtes de niveau de bloc autour de celui-ci et est normale qu'elle tombe hors de son conteneur. Dans n'importe quel navigateur, bien sûr. Vous devriez expliquer mieux votre problème. S'il n'apparaît que dans IE, cela ne pourrait être pas un flotteur, mais un problème de largeur ...