28172 sujets

CSS et mise en forme, CSS3

Position div de haut en bas et de gauche à droite

Bonjour à tous,

J'ai une question simple à laquelle je n'arrive pas à trouver de solution :
Je recherche à positionner des divs de haut en bas et de gauche à droite.

par exemple :
div1 div4 div7
div2 div5 div8
div3 div6

mes divs étant de même largeur et hauteur

il est très simple de faire de gauche à droite et de haut en bas (mais ce n'est pas ce que je veux) avec un float:left;

j'ai essayé le float:bottom; mais ca ne s'arrête pas en bas, du coup ca me donne :
div1
div2
div3
div4
...

sans m'afficher des divs à gauche.

Merci.

PS : Google n'est pas mon ami sur ce coup là Smiley cligne .
Hello borisB et bienvenue, Smiley smile

en CSS3 il sera possible d'utiliser le Multi-column layout mais par définition c'est encore mal (ou pas du tout) implémenté.

En attendant cela n'est pas possible directement (en CSS2.1) et il faudra donc faire cela en utilisant PHP ou JavaScript : 3 colonnes (DIV) en float:left ou en display:table-cell et un calcul à la volée du nombre d'éléments DIV total pour savoir dans quel DIV le placer (en supposant que ce nombre soit variable). Ce qui pourra par exemple donner au final :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Test</title> 
<style type="text/css">
#gauche, #milieu, #droite {
	width: 100px;
	float: left;
	margin-right: 10px;
	padding: 0 4px;
	text-align: justify;
}
</style>
</head> 
<body>
<div id="gauche">
	<div>
		<p>Lorem ipsum at detraxit iudicabit persecuti his</p>
		<p>Lorem ipsum at detraxit iudicabit persecuti his</p>
	</div>
	<div>
		<p>Lorem ipsum at detraxit iudicabit persecuti his</p>
		<p>Lorem ipsum at detraxit iudicabit persecuti his</p>
	</div>
</div>
<div id="milieu">
	<div>
		<p>Lorem ipsum at detraxit iudicabit persecuti his</p>
		<p>Lorem ipsum at detraxit iudicabit persecuti his</p>
	</div>
	<div>
		<p>Lorem ipsum at detraxit iudicabit persecuti his</p>
		<p>Lorem ipsum at detraxit iudicabit persecuti his</p>
	</div>
</div>
<div id="droite">
	<div>
		<p>Lorem ipsum at detraxit iudicabit persecuti his</p>
		<p>Lorem ipsum at detraxit iudicabit persecuti his</p>
	</div>
</div>
</body> 
</html>

PS : quant au float:bottom c'est un peu normal que ça ne fonctionne pas puisque ça n'existe pas : (re)lire les specs. Smiley cligne
Et pendant qu'on y est : le Guide de survie du positionnement CSS.
Modifié par Heyoan (27 Nov 2010 - 11:55)
Merci à vous

Il est bien dommage que l'on ne puisse pas le faire en CSS.

Je vais donc, le faire en JQuery. Par la même occasion essayer de ne pas oublier de poster le code. (ca peux peut-être servir pour d'autre Smiley cligne )
Sujet clos
Aller à