Discussion :

[Ravaka]

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.

[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 ...

[Ravaka]

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

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 HTML :

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
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

[Bisûnûrs]

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

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

Enfin le mieux reste clear:right sur ce div.

[Ravaka]

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...

[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.

[Ravaka]

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.

[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 ..

[Ravaka]

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

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.

[Bisûnûrs]

Je continue de regarder ça demain. =)

[Ravaka]

Merci beaucoup

Bonne nuit

[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 html :

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

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.

[Ravaka]

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