28172 sujets

CSS et mise en forme, CSS3

Multicolonne et dépassement des float

Bonjour à tous,

Je me met au multi-colonnes et je rencontre un problème sur Chrome à cause d'un float qui sort du bloc conteneur des colonnes.

Je m'explique :

Un article de blog et affiché sur 2 colonnes avec 
column-count: 2;
. Cet article contient en haut à gauche un cartouche (appelé ici logo), positionné en 
float: left;
.
Ce float dépasse légèrement vers le haut et empiète sur le bloc de titre qui le précède, grace au 
margin-top: -10px;
.
Ce chevauchement fonctionne parfaitement sur Firefox mais pas sur Chrome où le cartouche apparaît tronqué. Je devine que Chrome ne permet pas à un float de sortir du bloc conteneur des colonnes. Et pour preuve, si je passe à 1 colonne ça fonctionne correctement.

L'un d'entre vous connait-il une parade ?

Voici le code complet, le HTML:

<div class="header">
	Title
</div>

<div class="content">

	<div class="logo">
		Logo
	</div>

	<div>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu risus id purus porta fringilla. Fusce tempor placerat risus ac iaculis. In luctus sem blandit orci suscipit cursus. Pellentesque odio tortor, egestas nec arcu non, rutrum auctor ante. Phasellus vehicula luctus lectus, eu pellentesque dui dictum imperdiet. Maecenas sed nisi quis sapien tincidunt fringilla faucibus non sem. Vivamus urna nisl, placerat quis bibendum vitae, euismod eu tellus. Proin eu purus mauris. Etiam suscipit leo non mauris eleifend, id congue diam tincidunt. Proin hendrerit lobortis vehicula.
	</div>

</div>


et le CSS :

.header {
	line-height: 60px;
	font-size: 30px;
	background-color: #FDA6A6;		/* PINK */
}

.content {
	column-count: 2;
	-moz-column-count: 2;
	-webkit-column-count: 2;
	background-color: #A6B6FD;		/* BLUE */
}

.logo {
	float: left;
	width: 80px;
	height: 80px;
	background-color: #A4FCD1;		/* GREEN */

	margin-top: -10px;				/* BUG in Chrome */

}


Merci à tous.
Modifié par matock (04 Aug 2014 - 13:40)
Hello,

J'avoue que l'idée de mettre un float dans un élément en un élément en multi-colonne a l'air effectivement bien foireux Smiley lol J'ai fait une page de démo pour jouer : http://codepen.io/inpixelitrust/pen/ayHtk

Je dirais que Chrome fait ce qu'on lui dit de faire : il essai de répartir ton flottant sur les 2 colonnes, alors que Firefox lui sors le flottant du flux et ne prends pas du tout en compte les colonnes pour le placer.
http://f.cl.ly/items/120r2m1c0K1P2w1c1i0N/screenshot.279.png

Fascinant tout ça merci de l'avoir posté Smiley lol

Bon par contre pour la solution je dirais tu as essayé de sortir le flottant du multi-column ?
Bonjour,

Si j'ai bien compris ce que tu souhaites faire, ceci devrait fonctionner :

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="iso-8859-1" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title></title>
	<style type="text/css">
		div
		{
			position:relative;
			float:left;
			width:200px;
			margin-top: 25px;
			background:rgba(0,0,0,0.2);
			border:1px solid black;
			padding:20px;
		}
		p
		{
			position: relative;
			top: -60px;
		}
	</style>
</head>
<body>
	<div><p>blabla</p></div>
	<div><p>blabla</p></div>
</body>
</html>
Woww quelle réactivité !

Merci Stéphanie c'est tout à fait ça. j'ai fait un fork en ajoutant le 
margin-top: -10px;
pour mettre en évidence le problème.
codepen.io/inpixelitrust/pen/mGykE

Et non je ne veux (peux) pas sortir le flottant. Il s'agit d'un blog et le contenu du cartouche fait partie de l'article à poster. Ce serait assez compliqué à faire.

La solution simple (et radicale) c'est de ne pas faire dépasser le flottant, c'est tout.

Mais je me demandais s'il s'agissait un pb connu, et/ou si un hack de contournement existait.
Un grand merci en tout cas.

PS: merci aussi ohweb, mais c'est pas du tout ça. Il s'agit d'effectuer du multi-colonnes avec le column-count, et pas avec des float.
Modifié par matock (04 Aug 2014 - 14:39)
Un truc de ce genre sinon : 
.content {
	column-count: 2;
	-moz-column-count: 2;
	-webkit-column-count: 2;
	background-color: #A6B6FD;		/* BLUE */
	position:relative;
	padding-left: 80px;
}

.logo {
	width: 80px;
	height: 80px;
	background-color: #A4FCD1;
	position:absolute;/* GREEN */
	left:0;
	top: -10px;
}

http://codepen.io/inpixelitrust/pen/gwfLH

J'ai enlevé les flottants et utilisé de positionnement absolute. Mais je suis pas super sûre que ce soit le résultat que tu recherches visuellement
Modifié par Stéphanie W. (04 Aug 2014 - 14:37)
Je seconde la solution de Stéphanie.

.content { 
  column-count: 2;
  position: relative;
  padding-left: 100px;
}

.logo {
  position: absolute;
  top: -10px;
  left: 0;
  width: 80px;
  height: 80px;
}


N'utilise pas un float dans un conteneur multi-columns. Ce n'est pas une bonne idée.

Update : étrangement, avec une image et quelques tweaks CSS anodins, on arrive au rendu désire dans Chrome et dans Firefox. Demo : http://codepen.io/HugoGiraudel/pen/rockE.
Modifié par HugoGiraudel (04 Aug 2014 - 15:05)
Oui bonne idée mais avec 2 inconvénients :

1. le padding-left s'impose pour toute la hauteur de la première colonne. Ce n'est pas très visible dans cet exemple où le texte est court, mais avec un texte long c'est très visible. l'avantage du float est que le texte "enveloppe" le cartouche, comme une lettrine.

2. le cartouche est optionnel (c'est vrai, je ne l'avais pas dit...). Et dans ce cas, le fait d'imposer le padding-left n'a pas de sens. Là encore le float left avait l'avantage de ne décaler le texte vers la droite que lorsque c'était nécessaire.

PS: Hugo, dans ta démo le cartouche est "inclu" dans le content. Il s'agissait de le faire "sortir" en le faisant chevaucher sur le titre.
Bien sûr.

FLOAT OK avec Firefox
upload/55628-float-OK-F.png

FLOAT incorrect avec Chrome (tronqué)
upload/55628-float-KO-C.png

Solution alternative avec POSITION ABSOLUTE mais avec texte non flottant
upload/55628-absolute.png
Muuuhh c'est tordu, j'aime ce genre de défis Smiley lol
Je m'y pencherai à l'occasion mais en fait @matock je te demandais un visuel de la maquette pour voir le résultat escompté ^^
Ahhhhh merci GC. c'est à peut de chose près ce que m'a proposé un collègue ce matin : un "faux" div flottant en dessous pour détourer le texte, et un vrai pour placer le logo. A ceci près que ta solution est encore plus élégante car sans aucun faux div, tout est dans le CSS via un pseudo-élément.

Bravo je vais essayer ça ces prochains jours.
... et je te posterai un visuel Stéphanie (enfin si ça marche)

Et encore, merci merci.

PS: il en reste pas moins qu'il y a une différence d'implémentation entre FF et Chrome (ça c'est assez courant) mais que je ne sais même pas qui a raison ! (moins courant ça)
Sujet clos
Aller à