[Résolu] Élément flottant qui passe à la ligne.

Bonjour,

Je rectifie un peu le CSS et j'ai quelque chose qui m'échappe.

<article class="NewsCommunaute">
	<img src="design/NewsCommunautaire.png" alt="Les news de la communautée" /><br />
	<?php
	echo nl2br("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget diam eu erat laoreet elementum ac vel neque. Nullam mattis congue felis, a tincidunt velit consectetur at. Fusce orci massa, laoreet eu condimentum vel, euismod vitae massa. Aliquam tempus condimentum tincidunt. Aenean in sem nec dui semper bibendum. Aliquam diam leo, accumsan ut dapibus imperdiet, ultricies laoreet enim. Morbi vel orci felis, vitae scelerisque massa. Nam elit velit, bibendum ut fermentum ac, molestie non magna. In varius est eu mi ultricies in malesuada quam consequat. Donec ut velit non purus placerat pretium. Aliquam sit amet eros leo. Etiam sit amet tellus orci. Mauris varius, lorem sit amet venenatis ultricies, turpis dolor tincidunt quam, eget consectetur odio arcu id odio. Nam non luctus quam. Ut ut nisi dolor, a mollis tellus.
Donec congue dictum vestibulum. ");
	?>
</article>

<article class="ContenuVariable">
	<?php
	echo nl2br("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget diam eu erat laoreet elementum ac vel neque. Nullam mattis congue felis, a tincidunt velit consectetur at. Fusce orci massa, laoreet eu condimentum vel, euismod vitae massa. Aliquam tempus condimentum tincidunt. Aenean in sem nec dui semper bibendum. Aliquam diam leo, accumsan ut dapibus imperdiet, ultricies laoreet enim. Morbi vel orci ");
	?>				
</article>

<div id="vignette">
	<img src="design/vignette.png" alt="vignette" /><br />
	<article class="vignette">
		<?php
		echo nl2br("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget diam eu erat laoreet elementum ac vel neque. Nullam mattis congue felis, a tincidunt"); 
		?>
	</article>
	
	<article class="vignette VignetteSuivante">
		<?php
		echo nl2br("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget diam eu erat laoreet elementum ac vel neque. Nullam mattis congue felis, a tincidunt"); 
		?>
	</article>

	<article class="vignette VignetteSuivante">
		<?php
		echo nl2br("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget diam eu erat laoreet elementum ac vel neque. Nullam mattis congue felis, a tincidunt"); 
		?>
	</article>

	<article class="vignette VignetteSuivante">
		<?php
		echo nl2br("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget diam eu erat laoreet elementum ac vel neque. Nullam mattis congue felis, a tincidunt"); 
		?>
	</article>				
</div>

.NewsCommunaute{
	display							:block;
	width							:60%;
	height							:100%;
	clear							:both;
	float							:left;
	
	border-left						:5px solid #ccc;
	padding-left					:15px;
	background-color				:purple;
}

.ContenuVariable{
	display							:block;
	width							:33%;
	height							:100%;
	float							:left;
	
	margin-left						:5%;
	background-color				:#CCC;
}

#vignette{
	display							:block;
	width							:100%;
	height							:185px;
	clear							:both;
}

.vignette{
	width							:21%;
	float							:left;
	height							:150px;
	
	border-left						:5px solid #ccc;
	padding							:0 20px 0 20px;
	background-color				:green;
}

http://imagik.fr/thumb/397970.jpeg

Comme vous pouvez les voire dans me screen. En pleine page, les quatre vignettes sont bien alignés, et quand je rétrécis la fenêtre, la dernière vignette passe à la ligne d'en dessous.

Comment faire pour corriger le problème ?

Merci.
Modifié par Vict0 (14 Apr 2011 - 19:30)

Il faut spécifier une largeur à la div #vignette qui soit égale à la largeur des <article> qu'elle contient

Salut,

J'ai peur de ne pas avoir bien compris.
En gros il faudrait que la somme de la largeur des class .vignette doit être égal à la largeur de la div #vignette ?

C'est à peu prêt le cas, mais c'est difficile de calculer les PX+les %.

Effectivement je n'avais pas fait gaffe que la largeur était en %.
Ceci dit sur tes captures d'écran il y a du contenu dans tes <article> ainsi qu'une classe supplémentaire appliquée mais tu ne les as pas indiqués dans ton code. C'est peut etre de ce côté là qu'il faut regarder

Bonjour,

L'autre classe c'est un oublie. Je l'ai supprimé, mais ça ne change rien.

Diantre, ce code CSS est bien compliqué à lire. C'est quoi cette idée de rajouter cinquante espaces au milieu de chaque déclaration?

Alors il s'agit d'un problème de largeur disponible. En vertu du modèle de boite CSS, où les bordures et padding se rajoutent à la largeur spécifiée, la largeur totale que tu définis pour ta série d'éléments est:
(5px + 20px + 21% + 20px) × 4 = 84% + 180px.

Tes 4 éléments ne tiendront donc dans la largeur disponible que si ton bloc fait au minimum 1125px (selon l'équation 0,84x + 180 = x qui nous donne x=1125).

Solutions sans modifier le code HTML
- Tu peux utiliser display:table-cell plutôt que float pour tes éléments flottants. Pas compatible IE7.
- Tu peux utiliser box-sizing:border-box (et -moz-box-sizing:border-box) pour changer de modèle de boite. Pas compatible IE7.
Dans les deux cas on pourra définir une largeur à 25% plutôt que 21%.

Solution en modifiant le code HTML
- Tu peux avoir 4 blocs flottants en width:25% (sans marges, bordures ou padding latéraux), et à l'intérieur de chaque bloc tu doubles avec un autre bloc (DIV) qui aura le padding et les bordures (voire les marges) souhaitées.

Remarques en passant
- Ce code HTML a l'air un peu brouillon. J'ai repéré une valeur d'attribut alt qui est manifestement mauvaise (voir Bien utiliser le texte alternatif), il semblerait que certains éléments sont des titres et devraient être balisés comme tels tandis que d'autres images sont décoratives et devraient être dans le CSS. Attention aussi à utiliser l'élément HTML5 ARTICLE à bon escient.
- Ton conteneur #vignette n'a pas besoin de width:100%. On n'a pratiquement jamais besoin de width:100%, en fait (sauf pour les tableaux ou éléments en display:table, ou certains éléments positionnés en absolu), vu que les éléments en display:block prennent automatiquement toute la largeur disponible.
- Tu as plein de propriétés height définies. Je vois notamment un height:100% qui a de bonnes chances de ne pas s'appliquer, et des height:185px ou height:150px qui devraient être supprimés (height:auto, c'est le bien) ou être remplacés par des min-height équivalents.

Salut,

D'accord avec Florent. J'ajouterai juste qu'à la place de doubler les "floattants" avec des div's sans âme on peut en profiter pour "doubler" les flottants avec des balises "article", "section" (au cas où elles seraient appropriées), etc. sur lesquelles on appliquera les paddings et autres borders souhaités

Merci pour ces précieuses indications, je me lance tout de suite dedans.

Edit : Juste une petite question, je souhaiterais appliquer un margin-top à ma div #vignette, mais elle ne s'applique pas... :s

Ce ne serait pas une historie de flux par hasard avec le clear:both ? Si oui, comment y remédier ?

Merci
Modifié par Vict0 (10 Apr 2011 - 10:33)

Au pire je peux utiliser la position:relative et un top mais je ne trouve pas ça très propre vu que j'utilise que les float.

Si tu as un élément en clear:both, c'est sa bordure supérieure qui vient se placer sous les flottants. Sa marge supérieure (margin-top) continuera à passer sous les flottants.

Au pire tu peux plutôt potasser les techniques pour gérer le dépassement des flottants.
http://www.alsacreations.com/article/lire/7-depassement-flottants-css.html

Salut,

Enfin de compte j'ai trouver une astuce toute bête : créer une troisième div avec une hauteur de 30px.

Problème résolu, merci à vous.