[CSS]Pb de float sous Firefox...

float

9 mars 2007 à 0:01:41

Salut à tous les ZéRoS !

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 ? :euh:

Merci.

Anonyme

9 mars 2007 à 0:08:47

et sans le height: auto; ca donne quoi ?

FrEdI

9 mars 2007 à 0:16:09

J'ai déjà testé et ca fonctionne pas... C'est vrai que si je retire le "float:left" ca marche parfaitement, mais en faitce que je voudrais c'est rajouter un second "mini-conteneur" à droite en "float:left;" aussi, mais c là ou ca foire aussi (en gros que les deux minis-conteneur soit côte à côte :

<!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;
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 class="mini_conteneur">
mini_conteneur flottant2
</div>
</div>

</body>

</html>

Anonyme

9 mars 2007 à 0:20:19

faut utiliser la propriété css clear: both; mais je pense que pour cela tu devra créé un div vide (qui aura le clear: both) après tes div flottants.

peut-être que ca fonctionne si tu attribue ca à ton principal mais je suis pas sur.

FrEdI

9 mars 2007 à 0:29:47

Ca à l'air de fonctionner, je test ça sur mon gros site et je te dis si ca le fait !

Hirgon

9 mars 2007 à 6:37:10

J'aurais fais ça (ca marche) mais y a surement plus simple

Citation : Pas de titre

<!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;
border:solid 1px Black;
background-color:black;
border: 1px solid white;
text-align: left;
clear: both;
}

.mini_conteneur
{
float: left;
width: 20%;
border: 1px solid brown;
}
.mini_conteneur2
{
clear: both;
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 class="mini_conteneur2">
mini_conteneur flottant2
</div>
</div>

</body>

</html>

Anonyme

9 mars 2007 à 6:46:20

Salut,
Déjà, c'est <br /> est non <br>. Enlèves-les, ils sont inutiles (edit : et ils sont en dehors d'un paragraphe en plus !).
Ensuite je te conseil de placer ce code au début de ton code CSS :

*
{
margin : 0px;
padding : 0px;
}

Ca définira toutes tes marges à 0 et ce sera bien plus facile de rendre ta page compatible sur plusieurs navigateurs.
Tu as juste à définir les marges intérieures/extérieures nécessaires.

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

Je ne savais pas qu'il été possible de mettre 2 bordures. De plus, la première (la noire) est erronée.

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

Je n'ais jamais utilisé la propriété "clear", mais si j'ai bien compris tu définis un flottant pour aussitot en supprimer l'effet ?

bouro

9 mars 2007 à 14:00:32

Salut, Jean_Mich a raison pour les <br/> ils servent a rien, je t'ai mis le code j'ai essayé de pas trop changer ton code comme ca tu te reconnaitras dedans, j'ai rajouter juste deux ligne. j'ai aussi enlevé les <br/>.

voila

ps : pour le margin-top j'ai mis 10% si tu connais la taille exacte que tu veux tu peux la changer en px.

<!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
{
text-align: left;
width: 20%;
border: 1px solid brown;
margin-top:10%;
}

</style>
</head>

<body>

<div class="principal">
Conteneur

<div class="mini_conteneur">
mini_conteneur flottant
</div>
</div>

</body>

</html>