28173 sujets

CSS et mise en forme, CSS3

Problème de float sous Firefox...

Salut à tous !

Pour les modérateurs : ce serait possible de supprimer mon sujet de la partie "Salon général et débutants" car je n'avais pas vu qu'il y avait une partie spécifique au CSS.

J'ai un problème de compatibilité pour le code suivant... je trouve pas le truc donc je fais appel à vous... 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<html>
<head>
<title>
TEST
</title>
<style>
body
{
        background-color: Black;
        color: White;
}

.principal{
        width:920px;
        height: auto;
        border:solid 1px Black;
        background-color:black;
        border: 1px solid white;
        text-align: left;
}



.mini_conteneur
{
        float: left;
        width: 20%;
        border: 1px solid brown;
}

</style>
</head>
 
<body>

<div class="principal">
        Conteneur
        <br/>
        <br/>
        <br/>
        <div class="mini_conteneur">
        mini_conteneur flottant
        </div>
</div>


</body>

</html>



Je vous explique le problème... J'aimerais que le conteneur s'agrandisse en hauteur de façon automatique en incluant le mini_conteneur flottant. Le code que je vous ai indiqué précédemment est opérationnel sous IE, mais pas sur Firefox...
Est-ce que quelqu'un saurait comment procéder pour le faire fonctionner sous Firefox ?

Merci.
Modifié par Fredii (28 Apr 2007 - 16:20)
Bonjour,
c'est bon j'ai supprimé ton message du salon débutant mais tu aurais
pu l'y laisser.
Ton problème est très fréquent. Penses à jeter un coup d'oeil à la FAQ
avant de poser une question ici Smiley cligne

Voilà une explication visuelle
Modifié par Hermann (28 Apr 2007 - 16:38)
Merci pour l'info ainsi que pour l'explication visuelle.

Mais dans la logique des choses, on utilise clear afin d'annuler, entre guillements, l'appartenance d'un conteneur (en float) avec le flux précèdent (en gros de faire passer le conteneur à la ligne) ?

Et en regardant ton lien on comprend que le clear: both; permet aux éléments flottants de rentrer dans le flux de leur élément parent.

Quelle définition suivre au final ? Cela signifie que clear permet d'effectuer plusieurs choses ?
Fredii a écrit :

Mais dans la logique des choses, on utilise clear afin d'annuler, entre guillements, l'appartenance d'un conteneur (en float) avec le flux précèdent (en gros de faire passer le conteneur à la ligne) ?
Et en regardant ton lien on comprend que le clear: both; permet aux
éléments flottants de rentrer dans le flux de leur élément parent.

Je crois que tu t'embrouilles un peu mais ce n'est pas forcément un
concept très évident au début.
La propriété Clear n'a aucun effet sur l'élément flottant qui précède
l'élement auquel elle est appliquée.
Un élément flottant est en effet hors du flux normal vis a vis de son
conteneur et des boîtes de bloc adjacentes (sauf dans certains cas) mais
pas vis à vis du contenu de ces boîtes (souvent du texte).

Le dégagement (clear) ne fait que définir les côtés d'un élément sur
lesquels on ne peut pas placer d'éléments flottants.
Celui-ci représente l'espacement supplémentaire ajouté à la marge haute
d'un élément afin de de le faire passer dessous l'élement ou les éléments flottants qui le précède.

Un <hr /> (exemple fréquent) doté de la propriété clear n'est pas hors flux
pour son conteneur. Ce dernier englobera alors son enfant <hr /> en flux normal.
Pour info la propriété clear ne s'applique qu'aux éléments de type block: div, ul,p...
Modifié par Hermann (29 Apr 2007 - 00:04)
Et sinon, à part le clear qui demande de rajouter un élément et qui peut avoir des conséquences pas toujours sympathiques, il y a le overflow: auto ou le overflow: hidden, appliqué au bloc conteneur.

Le seul navigateur pour lequel ça ne marche pas est IE6, mais si on a déjà une largeur fixe pour le conteneur ça règlera le problème dans ce navigateur.
Sujet clos
Aller à