clear:both ne fonctionne pas

[Kreestal]

Bonjour à tous :-)

Après plusieurs heures d'essais infructueux, basés sur une dizaine d'articles et de tuto consacrés aux blocs flottants et au clear:both, je m'adresse à vous dans l'espoir que quelqu'un m'aidera à résoudre assez gênant qui apparaît dans une CSS sur laquelle je suis en train de travailler.

Site en démo ici: http://kreestal.free.fr/needhelp

(Le PHP et les liens ne fonctionnent pas, c'est uniquement pour vous montrer le problème de CSS)

Le problème: la div grise, située à droite, passe par-dessus le footer, alors que celui-ci a bien la propriété clear:both. Je voudrais que le footer soit toujours au bas de la page (et non de la fenêtre comme c'était le cas il y a quelques temps).

Vous trouverez la CSS générale en entier à cette adresse, mais je vous poste ici les extraits qui me semblent les plus pertinents:

(la CSS spécifique au bloc de droite, qui contient le bloc à fond gris, se trouve, elle, à cette adresse)

/*Bloc contenu  */
#bloc_contenu {
	padding: 0;
	margin: 0;
	width: 938px;
	position: relative;
	right: 0;
	min-height: 550px;
}

#bloc_contenu_gauche {
	float: left;
	margin: 0 !important;
	width: 680px; 
	padding: 10px 0 15px 0;
	border:0px solid black;
	min-height:250px;
}
	#bloc_contenu_gauche h1 {
		font-weight: bold;
		text-align: left;
		width: 100%;	
		border-width: 0px;
		border-style : solid;
		border-color: Black;	
		color: #ff7f00;
		font-size: 1.6em;
		padding: 0 0 10px 0;
		margin: 0px 0 0 0px;	
	}

/* Colonne droite */
#bloc_contenu_droit {
	margin: 0 !important;
	width: 255px;
	position: absolute;	
	top: 0;
	right: 0;
	border-width: 0;
	border-style : solid;
	border-color: #DFA300;		
}
/* Footer */
#footer {
	font-size: 0.85em;
	padding: 2em 1em 2em 2em;
	border-width: 1px 0 0 0;
	border-style : dashed;
	border-color: Black;
	color: #787878;
	[b]clear: both;[/b]
}

+ le HTML (allégé):

<div id="bloc_contenu">
			<div id="bloc_contenu_gauche">

				...
			</div>

			[b]<div id="bloc_contenu_droit">[/b]
				<div id="bloc_pub" class="sous_bloc_droit">
	Emplacement de bandeau publicitaire
	250 * 250

</div>				<div id="info_test" class="sous_bloc_droit">
	<div class="top">
		<div class="titre">TEST DE ZONE SUPPLEMENTAIRE</div>
	</div>
	<div class="middle">
		ZONE POUR DU TEXTE SUPPLEMENTAIRE ZONE POUR DU TEXTE SUPPLEMENTAIRE ZONE POUR DU TEXTE SUPPLEMENTAIRE ZONE POUR DU TEXTE SUPPLEMENTAIRE ...
	</div>
	<div class="bottom"> </div>

</div>			</div>
		</div>


[b]<div id="footer">[/b]
	<div id='footerRight'>
	FOOTER
	</div>

Petite précision: sur ce projet je ne m'occupe que de la CSS, et non de l'architecture du site (je le dis pour prévenir les remarques sur le nombre de CSS incluses dans le header ); d'autre part je ne me suis pas encore attelée à la CSS spécifique sur IE6: il vaut donc mieux éviter de visualiser le site avec pour l'instant - work in progress.

D'avance un grand merci!

Modifié 7 Juin 2007 par Kreestal

[TheRec]

Bonjour,

La propriété "clear" est utile lorsque tu positionne tes élément avec la propriété "float", dans ton cas le positionnement est effectuée en définissant "position: relative;" sur le parent de "bloc_contenu_droit" (c'est-à-dire "bloc_contenu") et ensuite en profitant du fait ce que cela crée un nouveau contexte de positionnement tu utilises la propriété "position: absolute;" sur "bloc_contenu_droit" et tu défini sa position absolue. Cela a pour effet de sortir "bloc_contenu_droit" du flux. Plus d'informations sur le positionnement : Comprendre le positionnement des éléments en CSS

Mon conseil est de plutôt passer par un positionnement par "float" si tu souhaite avoir un "footer" qui soit placé en dessous du plus long élément. Tu devra sûrement tirer avantage du procédé "Faux-Column" qui permet de combler visuellement le vide lorsqu'un colonne est plus longue que l'autre.

Bonne continuation.

[Kreestal]

Bonjour, et merci beaucoup pour ta réponse rapide!

J'ai repris ma CSS en supprimant le "position:absolute" de la div bloc_cotenu_droit (la div à fond gris), en lui mettant un float:left et un margin-left de la largeur de la div qui vient avant elle, c'est à dire bloc_contenu_gauche (elle aussi en float:left). Cependant, bien que la div bloc_contenu_droit se place effectivement à droite de son parent (bloc_contenu), elle passe quand même sous la div à sa gauche, c'est à dire bloc_contenu_gauche.

Bout de CSS modifié (en gras, les éléments qui posent sûrement problème ou contiennent la solution):

/*Bloc contenu  */
#bloc_contenu {
	padding: 0;
	margin: 0;
	[b]width: 938px;[/b]
	[b]position: relative;[/b] - [i]est-cela qui pose problème?[/i]
	right: 0;
	min-height: 550px;
}

#bloc_contenu_gauche {
	[b]float: left;[/b]
	margin: 0 !important;
	[b]width: 680px; [/b]
	padding: 10px 0 15px 0;
	border:0px solid black;
	min-height:250px;
}
	...

/* Colonne droite */
#bloc_contenu_droit {
	[b]width: 258px;[/b]
	[b]float:left;[/b]
	[b]margin-left:680px;
	top: 0;[/b]
	border: 0;		
}
/* Footer */
#footer {
	font-size: 0.85em;
	padding: 2em 1em 2em 2em;
	border-width: 1px 0 0 0;
	border-style : dashed;
	border-color: Black;
	color: #787878;
	[b]clear: both;[/b]
}

Cf. capture pour comprendre d'un coup d'oeil le problème:

Je comprends d'autant moins que la div bloc_contenu_droit contient "top: 0;"... ça veut donc dire qu'elle se place encore sous la div "bloc_contenu_gauche", or je ne comprends pas pourquoi vu que j'ai mis les 2 div en flottant, sans positionnement.

[papyboingtown]

Salut, essaie de faire ton bloc gauche (ou droit) à peine moins large...Et puis supprime le margin-left=680px dans ton bloc de droite

[Kreestal]

Salut, essaie de faire ton bloque gauche (ou droit) à peine moins large...Et puis supprime le margin-left=680px dans ton bloque de droite

Merci beaucoup! Le problème est effectivement résolu en veillant à ce que les deux blocs ont suffisamment de place pour pouvoir être effectivement affichés côte à côte et en supprimant le dit margin-left.

Si un modérateur pouvait marquer le sujet comme résolu, ça serait pratique. :-) (nb: je n'ai pas réussi à éditer le sujet avec "Edition rapide", en cliquant sur le bouton "Terminer", rien ne se passe - m'obligeant à recommencer en choisissant "Edition complète"..)

Modifié 10 Juin 2007 par Kreestal

[Dan]

Si un modérateur pouvait marquer le sujet comme résolu, ça serait pratique. :-) (nb: je n'ai pas réussi à éditer le sujet avec "Edition rapide", en cliquant sur le bouton "Terminer", rien ne se passe - m'obligeant à recommencer en choisissant "Edition complète"..)

Ce n'est pas dans les habitudes du Hub de changer les titres en précédant celui-ci de [Résolu].

Nous n'avons aucune intention de sortir premier sur Google pour ce mot clé, et le fait d'ajouter un mot supplémentaire en début de titre dilue l'importance des mots clés du titre lui-même.

C'est donc une hérésie sur le plan du référencement

[Kreestal]

Ce n'est pas dans les habitudes du Hub de changer les titres en précédant celui-ci de [Résolu].

Nous n'avons aucune intention de sortir premier sur Google pour ce mot clé, et le fait d'ajouter un mot supplémentaire en début de titre dilue l'importance des mots clés du titre lui-même.

C'est donc une hérésie sur le plan du référencement

Je ne disais pas ça dans cette optique (j'ignorais même que marquer "résolu" améliorait le référencement :!: ), mais pour éviter à d'autres utilisateurs du Hub de se casser la tête pour rien, ne sachant pas que le sujet est résolu - comme on m'a fait la remarque dans un précédent sujet. :-)

Modifié 10 Juin 2007 par Kreestal