Opera avec float:left et width:auto

**pop_up** · 24/04/2008, 13h51

Bonjour,

J'ai un petit problème d'affichage avec opéra et safari aussi je pense.
Je suis parti d'une grosse image mais j'ai du la découper en quatre car chaque image a un alt différent.

J'ai fait ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
#header {
    width: 100%;
    background-image: url("../images/fond-recherche.gif");
    background-position: right;
    background-repeat: repeat-y;
}
#banniere {
    margin: 0em; 
    padding: 0em; 
    width: 100%; 
    overflow: hidden;
    background-image: url("../images/fond-banniere.gif");
    background-position: left;
    background-repeat: repeat-y;
}
 
#logo {
    margin: 0em;
    padding-left: 2.3em;
    height: auto;
    float: left;
    width: auto;
}
.flottantGauche {
    float: left;
}
</style>
</head>
 
<body>
<div id="header">
    <div id="banniere">
        <div id="logo">
            <div class="flottantGauche">
                <img src="./img1.gif" width="60px" height="45px" alt="toto" /><br />
                <img src="./img2.gif" width="60px" height="45px" alt="titi" />
            </div>
            <div>
 
                <img src="./img3.gif" width="89px" height="76px" alt="tutu" /><br />
                <img src="./img4.gif" width="89px" height="14px" alt="tata" />
            </div>
        </div>
    </div>
</div>
</body>
</html>

J'ai épuré un peu le code
Vous aurez besoin de faire 4 images pour tester:
img1 60 x 45
img2 60 x 45
img3 89 x 76
img4 89 x 14

Sous firefox, IE6 et IE7 pas de problème j'obtiens bien un résultat similaire à une grosse image mais le fait de mettre un width: auto; ne fonctionne pas avec opéra.

auriez vous une idée pour faire fonctionner ce bout de code ?

merci

**Erwan31** · 24/04/2008, 14h52

Salut,
c'est un comportement en effet assez pénible qui implique de spécifier une
largeur au bloc conteneur flottant (ou en position:absolue) pour que le
comportement flottant d'un de ses enfants flottant soit pris en compte.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
#logo {
    float: left;
    width: 150px;
    padding-left: 2.3em;
}

Autre solution: tu rend aussi flottant ton deuxième div enfant.

**Candygirl** · 24/04/2008, 15h21

Envoyé par Erwan31

[...] pour que le
comportement flottant d'un de ses enfants flottant soit pris en compte.

Perso je ne pense pas que le flottant ne soit pas pris en compte, simplement qu'opera a une autre vision de l'adaptation de la largeur d'un flottant à son contenu.

D'ailleurs, j'en veux pour preuve le remplacement des images du bas par du texte (plus long que la largeur de l'image). A ce moment-là, le texte vient bien sur le côté des images, et donc le flottant est pris en compte. Par contre on observe un retour à la ligne dans le texte (ou alors avec un texte moins long que l'élément flottant du dessus, il vient se positionner aussi en-dessous). ça me laisse à penser qu'opera prend pour largeur du conteneur la largeur la plus importante des boîte du contenu (ou quelque chose du genre).

Dans le cas de ce post, le deuxième bloc d'image ne vient pas à côté faute de place et non pas parce que le flottant n'est pas pris en compte.

La question est: qui a raison ?! Il est assez rare qu'opera ait tord mais je n'ai pas encore trouvé de passage dans la recommandation qui m'éclaire sur ce sujet.

Mais autrement +1 pour les propostitions d'Erwan31

**Erwan31** · 24/04/2008, 15h30

Envoyé par Candygirl

Dans le cas de ce post, le deuxième bloc d'image ne vient pas à côté faute de place et non pas parce que le flottant n'est pas pris en compte.

La question est: qui a raison ?! Il est assez rare qu'opera ait tord mais je n'ai pas encore trouvé de passage dans la recommandation qui m'éclaire sur ce sujet.

Oui tu dois avoir raison. Les specs ne précisent rien à ce sujet manifestement
mais dans la section 9.5 on trouve ceci:

Une boîte flottante doit avoir une largeur explicite (spécifiée par la propriété 'width' ou la largeur intrinsèque pour les éléments remplacés).

**pop_up** · 24/04/2008, 15h35

ta solution m'irait si j'avais le droit d'utiliser les pixels mais je ne peux qu'utiliser les em.

Je vais faire avec les em pour l'instant mais ça sera par très joli si l'on dézoom.

**Erwan31** · 24/04/2008, 15h37

Je te recopie la 2ième solution:

Autre solution: tu rend aussi flottant ton deuxième div enfant.

@CandyGirl: On trouve des infos intéressantes sur Webdevout

**pop_up** · 24/04/2008, 15h46

J'avais pas vu la seconde solution.

t'es trop fort !!!

ça me va. Reste à trouver un safari et à tester dessus.

Encore merci

@CandyGirl : merci aussi ça va de soit

**Candygirl** · 24/04/2008, 16h01

De rien et merci; c'est gentil, même si là je n'ai fait qu'apporte une question supplémentaire. C'est clairement Erwan31 qui mérite tes remerciements pour les solutions

@Erwan31: merci pour les liens je vais étudier à l'occase; plus le temps là

Opera avec float:left et width:auto

CSS

Discussions similaires

Partager

Partager