28172 sujets

CSS et mise en forme, CSS3

[Résolu] Structure de ma page : CLEAR dans un design en Float >boom

Coucou tout le monde,

j'ai une question sur la structure de ma page qui me pose problème...

J'ai fais une structure avec 2 colonnes (1 flottante et l'autre avec un margin-left qui correspond) dans une div conteneur, mais si je met un clear:both à un élément, tout le contenu qui suit se déplace sous le contenu de la colonne d'à côté.

Que me conseillez-vous ?
Ne pas utiliser une structure en colonnes flottantes ? J'aurais bien positionné mes colonnes avec display: inline-block mais il semble difficile de le rendre compatible avec IE 7 et +, je me trompe ?

Merci de votre aide Smiley cligne
Bonne fin de WE et bonne semaine.
++
Olivier
Modifié par Olivier06 (09 Aug 2010 - 17:34)
Administrateur
Hello,

Tes deux "colonnes" sont bien deux éléments (balises) frères distincts ?
Ou n'y a t-il qu'un seul élément flottant, le reste étant du contenu anonyme ?
bonsoir, merci pour ta réponse. La structure ressemble un peu à ce gabarit avec :

div#content {...} /* Pour le centrage */
div#content div#content_main { /*colonne de gauche */
	float: left;
	width: 440px;
	margin: 0 0 0 33px;
	}
div#content #content_alt { /*colonne de droite (sidebar) */
	margin: 0 45px 0 525px;
	}


donc div#content_main et #content_alt sont frères, enfants de #content.

Le problème vient lorsque je met un élément ayant la propriété clear:both; dans la div#content_alt, le contenu qui suit cet élément se décale vers le bas, aligné verticalement sous la fin du contenu de #content_main.
Bonjour,
Olivier06 a écrit :
Le problème vient lorsque je met un élément ayant la propriété clear:both; dans la div#content_alt, le contenu qui suit cet élément se décale vers le bas, aligné verticalement sous la fin du contenu de #content_main.
C'est totalement normal, puisque c'est le but de clear ("supprimer" le flottement. Pourquoi souhaites-tu utiliser clear sur content_alt ?
Dans #content_alt j'ai une succession de block en float et j'ai utilisé un clear sur un élément pour "reprendre" le flux pour les éléments qui suivent.
Ok, je ne sais pas si c'est bien clair...

Et vous, vous utilisez float pour vos structures ?
Dans ce cas, il serait mieux d'utiliser overflow:auto; sur content_alt ; tu peux également ajouter un élément neutre et vide enfant de content_alt et lui appliquer le clear.

clear, s'applique à un bloc pour lequel on veux reprendre le flux normal, il ne faut donc pas l'appliquer content_alt.

L'utilisation de float et clear n'est pas forcément évidente, il faut bien se familiariser avec elle lors de design un peu complexes.

Et oui, j'utilises énormement float, mais cela demande une certaine rigueur.
Merci pour ta réponse, mais je n'applique pas directement clear à content_alt, mais bien à un élément neutre à l'intérieur de celui-ci.
Modifié par Olivier06 (09 Aug 2010 - 14:01)
Non, et il ne semble pas possible de partager des fichiers sur le forum. Je peux te l'envoyer par mail ou autre moyen ?
Modifié par Olivier06 (09 Aug 2010 - 14:01)
Non, mais il t'es possible de mettre le code complet de la page sur le forum (même si c'est moins pratique qu'une page en ligne).
voici une version simplifiée :

<!DOCTYPE...>
<html>
<head>
	<style type="text/css">
		html, body, div { margin: 0; padding: 0; font-size: 100%;}
		body {text-align: center;}
		#page {position: relative;width: 960px;margin: 0 auto;text-align: left;}
		#content_main {float: left;	width: 440px;margin: 0 0 0 33px;background-color: blue;}
		#content_alt {margin: 0 45px 0 525px;width: 390px;}
		#content_alt #galerie a.photo_min {	float: left;display: block;	width: 87px;height: 96px;background-color: #555;}
		a.photo_min img {width: 75px;height: 75px;border: 1px solid #ccc;}
	</style>
</head>
<body id="accueil">
	<div id="page">
			<div id="content">	
				<div id="content_main">					
					<p>iouerhgiulrheg</p><p>iouerhgiulrheg</p><p>iouerhgiulrheg</p><p>iouerhgiulrheg</p><p>iouerhgiulrheg</p><p>iouerhgiulrheg</p><p>iouerhgiulrheg</p><p>iouerhgiulrheg</p><p>iouerhgiulrheg</p><p>iouerhgiulrheg</p><p>iouerhgiulrheg</p><p>iouerhgiulrheg</p><p>iouerhgiulrheg</p><p>iouerhgiulrheg</p><p>iouerhgiulrheg</p><p>iouerhgiulrheg</p><p>iouerhgiulrheg</p><p>iouerhgiulrheg</p><p>iouerhgiulrheg</p><p>iouerhgiulrheg</p><p>iouerhgiulrheg</p><p>iouerhgiulrheg</p><p>iouerhgiulrheg</p><p>iouerhgiulrheg</p><p>iouerhgiulrheg</p><p>iouerhgiulrheg</p><p>iouerhgiulrheg</p>
				</div><!-- #content_main -->
				<div id="content_alt">
					<div id="galerie" class="sur_2_cols">
						<h2>Titre bloc 1</h2>
						<ul class="en_ligne">
							<li><a class="photo_min" href="#"><img src="1.jpg" /></a></li>
							<li><a class="photo_min" href="#"><img src="2.jpg" /></a></li>
							<li><a class="photo_min" href="#"><img src="3.jpg" /></a></li>
							<li><a class="photo_min" href="#"><img src="4.jpg" /></a></li>
							<li><a class="photo_min" href="#"><img src="5.jpg" /></a></li>
							<li><a class="photo_min" href="#"><img src="6.jpg" /></a></li>
						</ul>	
						<div class="clear"></div>
					</div>
					<div  class="sur_2_cols">
						<h2>Titre bloc 2</h2>
						<ul class="float_left">
							<li>1</li>
							<li>2</li>
							<li>3</li>
						</ul>	
					</div>
				</div><!-- #content_alt -->
				<hr class="clear" />
			</div><!-- #content -->
	</div><!-- #page -->
</body>
</html>
Bonjour,

À lire avant toute chose: Float, clear et contextes de formatage.

Solutions possibles:
1. Utiliser un contexte de formatage au niveau de #content_alt pour limiter la portée du clear.
2. Utiliser un contexte de formatage au niveau de #galerie pour empêcher le dépassement des flottants (et du coup on vire le <div class="clear"></div> inutile).
Modifié par Florent V. (09 Aug 2010 - 15:36)
Whow ! Merci Florent, cet article est super ! Smiley cligne
Je comprends mieux pourquoi tu me parlais d'overflow:auto; sur content_alt Laurie-Anne, merci.
Sujet clos
Aller à