Conflit de 2 "float: left"

Version imprimable

11/09/2007, 22h27
Ravaka

Conflit de 2 "float: left"

Bonjour, j'ai un problème avec du css et 2 éléments float. En voici une illustration http://mangajin.free.fr/?page=Articl...-You-Video.php.

Le menu de gauche et la section "Adresse" sont tous les deux des float:left, cependant, quand je mets un clear: left dans la section "Remarques", celle-ci se décale par rapport au menu et non pas par rapport à la section "Adresse".

Que dois-je faire pour que la section "Remarques" se place en dessous de la section "Adresse" de la page ?

Merci d'avance.
11/09/2007, 22h34
Bisûnûrs

Essaie avec un clear:both.

Mais j'avoue que l'indentation de ton code m'empêche d'aller voir plus loin ...

Hum...

Avec clear both, le résultat reste le même... Mais merci de vous intéressé à mon problème :mrgreen:

Désolé pour le code, mais comme tout est quasiment généré en php, j'arrive pas à bien indenter, pourtant j'ai essayé.

Code simplifié :

Code:

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
 
<div id="conteneur_page">
  <div id="page">
    <div id="haut"></div>
    <div id="conteneur">
      <div id="menu_1">MENU GAUCHE (Plus long que le texte de l'article). </div>
      <div id="menu_2">MENU DROITE</div>
      <div id="contenu">
        <div class="contenu_contenu">
          <div class="titre">
            <h1>Tai You Video</h1>
		<div class="info">
			Post&eacute; le 2007-03-25 13:18:02<br />
 
			R&eacute;dig&eacute; par Rav<br />
			Note de l'auteur: 14/20<br />
			Note des membres: Aucune note
		</div>
	</div>
 
	<div class="adresse">
		<h2>Adresse:</h2>
 
		<div class="adresse2">
			44 avenue d'Ivry<br />
			75013 Paris<br /><br />
			T&eacute;l&eacute;phone: <br />
			Horaires: <br /><br />
			<h3>Acces:</h3>
 
			Metro 7 - Station Porte d'Ivry<br />
			Tram T3 - Arr&ecirc;t Porte d'Ivry<br />
			Bus 27 &amp; PC2 - Arr&ecirc;t Porte d'Ivry
		</div>
	</div>
 
	<div class="texte">
		Alors, voici une boutique sympa de la galerie commerciale du quartier chinois du 13e arrondissement de Paris qui a un vendeur sympa lui aussi.<br />
 
<br />
La boutique fait une r&eacute;duction de 5% sur les mangas VF. Elle propose aussi des DVD d'importation. Il y a une grande vari&eacute;t&eacute; des produits d&eacute;riv&eacute;s dont une quantit&eacute; &eacute;norme de peluches et de figurines &agrave; prix plut&ocirc;t attractifs, c'est &agrave; dire, souvent pour pas cher.<br />
<br />
 
A essayer!
	</div>
	<div class="PhotosHorizontales">
		<div class='PhotosHorizontales'>
	</div>
	</div>	
 
	<div class="remarques">
		<h2>Remarques:</h2>
		<p>Mangas &agrave; -5%.<br />
 
Des goodies &agrave; prix r&eacute;duit.</p>
	</div>
 
	<div id="Messages">
		Vous devez vous identifier pour poster un commentaire.<br/>
					<ul>
 
						<li> </li>
 
					</ul>
	</div>
 
</div>
 
<div id="pub2">
 
</div>
 
				</div>
				<div id="bas">
					&copy; Seraphic Corp 2001-2007 - Toute reproduction totale ou partielle est interdite
				</div>
			</div>
 
		</div>
	</div>

J'espère que comme ça, ce sera plus lisible ;)

11/09/2007, 23h04
Bisûnûrs

Le clear:both doit être sur le div class="remarques". :mrgreen:

Je viens d'essayer avec Firebug en le rajoutant à ce div et ça fonctionne parfaitement.

Enfin le mieux reste clear:right sur ce div.
11/09/2007, 23h10
Ravaka

Heu...

Alors, j'ai mis votre solution en ligne mais chez moi, le div class="Remarques" se met maintenant en dessous de l'élément flottant le plus long, dans mon cas le menu de droite avec la pub de google... :(

Pourtant, moi aussi j'ai Firefox, je dois avouer que je suis perdu...
11/09/2007, 23h13
Bisûnûrs

Citation:

Envoyé par Bisûnûrs

Enfin le mieux reste clear:right sur ce div.

J'avais édité mon post, ça a dû sûrement t'échapper.

Essaie de cette manière et dis-moi si ça te convient.
11/09/2007, 23h18
Ravaka

Voyons...

Alors avec le div à clear: right j'ai exactement la même chose: Le div s'aligne par rapport au menu de droite qui devient très long quand la pub de google s'affiche. :?

On voit même le cadre des Remarques et de l'Adresse se croiser.
11/09/2007, 23h33
Bisûnûrs

Ah zut, en effet ...

Je viens de désactiver AdBlock+ et j'ai le résultat que tu décris. Avant je n'avais aucune pub, donc le résultat était bon ..
11/09/2007, 23h34
Ravaka

^^

;)

En tout cas, j'espère que mon problème n'est pas dû à une limitation du CSS... Sinon, c'est peine perdue. :roll:

Je me demande s'il n'existerait pas un moyen pour faire un sorte que le div class=contenu oublie l'existence du div class=Menu_1, je pense que comme ça, ça marcherait.
11/09/2007, 23h37
Bisûnûrs

Je continue de regarder ça demain. =)
11/09/2007, 23h38
Ravaka

Merci

Merci beaucoup ;)

Bonne nuit
12/09/2007, 09h04
Bisûnûrs
Hello.

Je pense que tu vas devoir modifier une partie de ton code HTML.

L'intérêt sera d'avoir cette structure :
Code:

1 2 3 <div id="menu1"></div> <div id="contenu"></div> <div id="menu2"></div>
Chacun de ces div sera en float:left, tu oublies les margin de contenu et tu peux lui donner une largeur fixe, comme tes menus.

Maintenant seulement le clear:both sur le cadre remarques fonctionnera.
12/09/2007, 11h14
Ravaka

Merci

Merci beaucoup, le problème est maintenant résolu grâce à vous. :king: