28172 sujets

CSS et mise en forme, CSS3

Supprimer un flottant

Bonjour à tous,

Je vous expose mon problème :

Je suis en train de développer un site dont le corps est composé de 3 colonnes.
J'ai donc un div "left" en 
float : left
, un div "right" en 
float : right
et un div "center" avec un 
margin-left
et un 
margin-right
, afin qu'il soit calé entre les deux blocs.
Voici mon code :

<!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" xml:lang="fr" lang="fr">
	<head>
		<title>Site</title>
		<style type="text/css">
			#global
			{
				width : 896px;
				margin : auto;
			}

			#left
			{
				float : left;
				width : 205px;
			}

			#right
			{
				float : right;
				width : 196px;
			}
			
			#center
			{
				margin-left : 222px;
				margin-right : 212px;
			}
		</style>
	</head>
	<body>
		<div id="global">
			<div id="left"></div>
			
			<div id="right"></div>
			
			<div id="center"></div>
		</div>
	</body>
</html>



Jusqu'ici tout va bien !

Mon problème se situe ici : je souhaite ajouter dans le 
#center
un bloc avec une image en 
float : left
, pour que le texte associé à l'image puisse être calé à droite de l'image.
En-dessous de ce bloc, je souhaite ajouter un autre bloc contenant du texte. Pour cela, j'utilise 
clear : left
afin de supprimer le flottant précédent.
Sauf qu'avec cette manip', je supprime tous les 
float : left
, donc mon bloc vient se caler en-dessous de ma colonne de gauche 
#left
.

Comment puis-je faire pour remédier à ce problème ?
Peut-on supprimer un flottant bien spécifique ?

Merci pour votre aide !
Hello,
De mémoire, il faut ajouter un

position: relative;

sur ta div

#center


Mais à vérifier...
Tout d'abord, merci pour vos réponses !

J'ai testé vos propositions et cela ne règle pas mon problème.
Je vous joins une image (très simpliste) pour illustrer mon problème.

Si je ne mets pas de clear : left avant mon 2ème bloc de texte, le flottant gauche va s'appliquer et positionner ce bloc en-dessous du premier bloc de texte.
Si j'en mets un, le deuxième bloc de texte descend à la fin du div left.

Comment puis-je faire pour supprimer le flottant sans "cassure" ?

upload/41981-illustrati.jpg
Jojo59 a écrit :
J'ai testé vos propositions et cela ne règle pas mon problème.

Alors tu as mal testé. Smiley smile

Je t'ai indiqué un article qui parle entre autres de contexte de formatage (il y a aussi un article de Laurent Denis spécifiquement sur ce sujet, mais le serveur a l'air en rade aujourd'hui...).
Dans cet article il y a notamment ces deux exemples:
1. Exemple : bloc central avec marges compensant les flottants
2. Exemple : bloc central sans marges, mais avec un contexte de formatage

Si je rajoute un clear:left sur un contenu du bloc central dans le premier exemple, on a effectivement le souci que tu décris. Si je fais la même chose dans le deuxième exemple, tout va bien.
Modifié par fvsch (24 Nov 2011 - 22:54)
Correction : effectivement, cela fonctionne bien !
Mais voilà le problème rencontré avec cette technique : si le bloc #left est plus grand que le #center, le bloc #left passe au-dessus de mon #footer. Je vous joins une illustration.

J'ai testé pas mal de choses pour essayer de supprimer ce problème mais en vain. J'avais réussi à ce que l'affichage se fasse correctement avec un clear dans le bas de mon corps, mais du coup le fond sur le côté (l'ombre) ne se répétait plus...

Merci fvsch pour ta patience !

upload/41981-illustrrat.jpg
Autant pour moi, j'ai réussi à placer le clear là où il fallait !

Merci à tous vos contributions et surtout à fvsch !
Sujet clos
Aller à