Div sur 2 colonnes

Question

Iris

9 Jan 2007 à 12:45

Bonjour,

J'ai un div de 600 pixels de large et je souhaiterais mettre des div (300 pixels) à l'intérieur sur 2 colonnes contenant du texte.

J'aurais donc un div à gauche à 300 pixels et un div à droite à 300 pixels mais je souhaite que si le div de droite est plus long que le div de gauche, le prochain div vienne se placer sous le premier div de gauche et ainsi de suite...
upload/2059-flux.gif

Pour résumer le dernier div viendrait se placer sous le div le plus court.

J'ai fait ça mais cela ne fonctionne pas car le 3eme div s'aligne sur le bas du div de droite !!!


#cadreSommaire {
position: relative;
float: left;
text-align: justify;
width: 300px;
border-left: 1px solid #F4F4F4;
}

Merci de votre aide...
Modifié par Iris (09 Jan 2007 - 12:46)

Super_baloo8

9 Jan 2007 à 13:12

Il suffit de mettre un float:right au deuxieme conteneur. (300px de droite)

Iris

9 Jan 2007 à 13:19

Merci pour ta réponse mais ce n'est pas ce que je souhaite faire. En effet, mes textes viennent d'une base de données et je souhaite, via une boucle, les afficher les uns à la suite des autres dans le flux normal de la page et sans me soucier que tel ou tel texte sera positionné à gauche ou à droire !

On peut bien sur utiliser un modulo dans la boucle et si c'est pair on utilise le cadre 1 et pour impair le cadre 2 !

Mais existe t'il une solution plus simple en css ?
Modifié par Iris (09 Jan 2007 - 13:21)

Super_baloo8

9 Jan 2007 à 13:34

Tu souhaite juste voir deux colonne identique donc ? Tu n'est pas clair dans tes explications.

Ce que j'avais compris.

J'ai un conteneur de 600px qui contient deux autre conteneur de 300px chacun et un troisieme de 300px qui se situe en dessous des deux premiers conteneur.

Donc tu faisais un float left sur le premier conteneur a gauche et un float right sur le deuxiem conteneur de droite. Ainsi ton troisieme conteneur se mettais soit à gauche si le deuxieme conteneur étais plus long que le premier, soit à droite si le premier conteneur étais plus long que le deuxieme.

Mais a voir ce n'est pas ca que tu voulais.

Super_baloo8

9 Jan 2007 à 13:39

Pour etre encore plus précis, voici le code qu'il te faudrais (car je viens de comprendre qu'il n'y aurais pas que 3 boites, mais un assemblage de plusieurs boites.

Code html :


<div id="fixe_gauche_haut">
</div>
<div class="droite">
</div>
<div class="gauche">
</div>
<div class="droite">
</div>
<div class="gauche">
</div>
<div class="droite">
</div>
<div class="gauche">
</div>
<div class="droite">
</div>
<div class="gauche">
</div>

Code CSS:


div{
width=300px;
}

#fixe_gauche_haut{
float:left;
top=0px;
left=0px;
}
.droite{
float:right;
}
.gauche{
float:left;
}

Modifié par Super_baloo8 (09 Jan 2007 - 13:40)

Iris

9 Jan 2007 à 13:51

J'ai essayé ta solution mais celle ci ne fonctionne pas. La première est bien en haut à gauche mais ensuite les autres sont toutes à droite.

Je souhaite mettre des boites les unes à coté des autres et si une boite ne peut plus être placée à droite de la précédente elle viendra se placer juste en dessous de celle se trouvant à gauche > voir dessin du premier post
Modifié par Iris (09 Jan 2007 - 13:55)

Iris

9 Jan 2007 à 14:02

En utilisant ce css j'obtiens ça (mes boites ne sont pas les unes en dessous des autres !


#cadreSommaire1 {
position: relative;
float: left;
text-align: justify;
margin: 10px;
width: 390px;
border-left: 1px solid #F4F4F4;
clear: both;
}
#cadreSommaire2 {
position: relative;
float: right;
text-align: justify;
margin: 10px;
width: 390px;
border-left: 1px solid #F4F4F4;
clear: both;
}

Super_baloo8

9 Jan 2007 à 14:13

Quand tu utilise Clear:both les boite s'aligne en dessous de la derniere boite flottante, donc c'est normal.

Essayes ca en local :

<!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">
<title>TEST</title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<style type="text/css">
*{
text-align:center;
}#large{
width:605px;
}
#fixe_gauche_haut{
float:left;
top:0px;
left:0px;
width:290px;
border:1px black solid;
}
.droite{
float:right;
width:290px;
border:1px blue solid;
}
.gauche{
float:left;
width:290px;
border:1px red solid;
}
</style>
</head>

<body>
<div id="large">
<div id="fixe_gauche_haut">

	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />

	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
</div>
<div class="droite">

	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />

	contenu<br />

	contenu<br />

	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
</div>
<div class="gauche">

	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />

	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />

	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
</div>


</div>

</body>
</html>

Seul soucis, si le premier bloc est trop grand, alors le troisieme bloc sera bien sur la droite, mais collé sur la gauche.
Modifié par Super_baloo8 (09 Jan 2007 - 14:19)

Iris

9 Jan 2007 à 14:16

Si je le retire (et je dois donc le retirer) cela me donne ton exemple qui n'est pas ce que je recherche

Iris

9 Jan 2007 à 14:19

Ton dernier exemple fonctionne bien Smiley cligne

Je vais essayer de l'appliquer à ma page

Iris

9 Jan 2007 à 14:33

Merci... cela fonctionne !

Donc il n'y a pas de solution pour ne créer qu'une seule boite qui se positionnerait automatiquement à la suite et en dessous des autres Smiley bawling

Modifié par Iris (09 Jan 2007 - 14:35)

Iris

9 Jan 2007 à 15:09

En fait comme tu l'a dit cette solution n'est pas idéale car cela dépend de la taille des boites pour que l'alternance des boites se fassent bien.

Si quelqu'un à une autre solution !

maaanu

9 Jan 2007 à 15:14

J'ai pas bien suivi la solution proposée, alors tapez pas si je dit une connerie...

Mais est-ce que un truc du genre :

#gauche {
  width:300px;
  margin-right:300px;
}

#droite {
  width:300px;
  float:right;
}

ça pourrait marcher?

Iris

9 Jan 2007 à 15:19

Non cela ne fonctionne pas non plus

Patidou

9 Jan 2007 à 15:32

Je ne vois pas comment faire autrement que 2 colonnes à l'intérieur du div principal et les articles qui viennent une fois dans celle de gauche, une fois dans celle de droite. Sinon uniquement par css, cela me semble difficile. Ou alors un truc comme l'extension Sage pour firefox (mais ça ne conviendra pas je crois) :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="Content-Style-Type" content="text/css">
	<link rel="stylesheet" type="text/css" title="standard Style" href="chrome://sage/content/res/sage.css">
	<base href="http://www.lesoir.be/">
	<title>Sage - Le Soir en ligne: la une</title>
</head>

<body>
	<div id="rss-header">
		<h1 id="rss-title"><a id="rss-link" href="http://www.lesoir.be/">Le Soir en ligne: la une</a></h1>
		<p id="rss-desc">L'info en continu</p>
	</div>
	
		<div class="item">
		<h2 class="item-title">
			<span class="item-ordinal">1.</span>

			<a href="http://www.lesoir.be/dossiers/prince_laurent/article_504392.shtml">PRINCE_LAURENT: Laurent a livré son témoignage</a>
		</h2>
		<div class="item-desc"><img src="http://www.lesoir.be/mediastore/_2007/janvier/du_1_au_10/_09_laurent_Epa.jpg" width="120" hspace="4" vspace="4" />Le prince Laurent a finalement pu être entendu comme témoin devant le tribunal d'Hasselt. Sa version est sensiblement la même que celle livrée à la police hier soir. Sauf deux détails importants.</div>
		<div class="item-pubDate">Tue, Jan 9, 2007 13:05</div>

		<div class="item-technorati"><a href="http://www.technorati.com/cosmos/search.html?url=http%3A%2F%2Fwww.lesoir.be%2Fdossiers%2Fprince_laurent%2Farticle_504392.shtml" title="Technorati Trackback"><img src="chrome://sage/skin/technorati.gif" border="0"></a></div>
	</div>
	<div class="item">
		<h2 class="item-title">
			<span class="item-ordinal">2.</span>
			<a href="http://www.lesoir.be/actualite/belgique/2007/01/09/article_retards_consequents_de_trois_thalys.shtml">BELGIQUE: Retards importants de trois Thalys</a>
		</h2>
		<div class="item-desc">Trois trains Thalys en provenance de France, dont un à destination de Bruxelles-Midi, enregistrent des retards d'environ 90 minutes, a annoncé mardi Infrabel, le  gestionnaire du réseau ferroviaire belge.</div>

		<div class="item-pubDate">Tue, Jan 9, 2007 10:15</div>
		<div class="item-technorati"><a href="http://www.technorati.com/cosmos/search.html?url=http%3A%2F%2Fwww.lesoir.be%2Factualite%2Fbelgique%2F2007%2F01%2F09%2Farticle_retards_consequents_de_trois_thalys.shtml" title="Technorati Trackback"><img src="chrome://sage/skin/technorati.gif" border="0"></a></div>
	</div>
	<div class="item">
		<h2 class="item-title">
			<span class="item-ordinal">3.</span>
			<a href="http://www.lesoir.be/actualite/monde/2007/01/09/article_washington_attaque_al_qaida_en_somalie.shtml">MONDE: Washington attaque al-Qaïda en Somalie</a>

		</h2>
		<div class="item-desc"><img src="http://www.lesoir.be/mediastore/_2007/janvier/du_1_au_10/_09_usattack.jpg" width="120" hspace="4" vspace="4" />L'armée américaine a mené des attaques aériennes en Somalie contre des islamistes soupçonnés de liens avec al-Qaïda et traqués dans l'extrême sud du pays depuis leur déroute face aux forces somaliennes et éthiopiennes, a annoncé mardi le gouvernement somalien.</div>

		<div class="item-pubDate">Tue, Jan 9, 2007 9:51</div>
		<div class="item-technorati"><a href="http://www.technorati.com/cosmos/search.html?url=http%3A%2F%2Fwww.lesoir.be%2Factualite%2Fmonde%2F2007%2F01%2F09%2Farticle_washington_attaque_al_qaida_en_somalie.shtml" title="Technorati Trackback"><img src="chrome://sage/skin/technorati.gif" border="0"></a></div>
	</div>
	<div class="item">

</body>

</html>

html * {
	-moz-box-sizing: border-box;
}

html {
	line-height: 1.3; 
	background-color: #FFF;
}
				
body {
	margin: 0px;
	color: #222;
	font-family: verdana;
}

a:link		{ text-decoration: none; color: #436976; font-weight: bold; }
a:visited	{ text-decoration: none;  color: #537986; }
a:hover		{ text-decoration: underline; }
a:active	{ text-decoration: none; }

p.item-desc a:link { color: #029; }

#rss-header {
	background-color: #dee7ec;
	border: 1px solid #8cacbb;
	padding: 6px 8px;
	margin: 10px 2%;
}

#rss-title {
	font-size: large;
	line-height: 1;
	margin: 0px;
	padding: 0px;
}

#rss-desc {
	font-size: small;
	margin: 0px;
	padding: 5px 0px 0px 20px;
}

div.item {
	border: 1px solid #8cacbb;
	width: 47%;
	min-width: 14em;
	margin: 0px 0px 8px 2%;
	padding: 0px;
	float: left;
	overflow: hidden;
}

h2.item-title {
	background-color: #dee7ec;
	font-size: x-small;
	font-weight: normal;
	line-height: 1.1;
	margin: 0px;
	padding: 5px 5px 8px 8px;
}

span.item-ordinal {
	padding-right: 0.2em;
}

div.item-desc {
	min-height: 6em;
	font-size: x-small;
	margin: 0px;
	padding: 8px 10px;
}

div.item-pubDate {
	font-size: x-small;
	margin: 0px;
	padding: 8px 10px;
	width: 80%;
	float: left;
}

div.item-technorati {
	font-size: x-small;
	margin: 0px;
	padding: 8px 10px;
	width: 20%;
	float: right;
	text-align: right;
}

img {
	max-width: 100%;
	height: auto;
}

Modifié par Patidou (09 Jan 2007 - 15:34)

Iris

9 Jan 2007 à 15:36

OK merci je venais juste de faire cette modificationde mon coté et bien sur maintenant il n'y a plus de problème. Ce n'est pas ce que je souhaitais faire au départ mais merci pour ton temps...

fvsch

9 Jan 2007 à 16:23

Pour information, j'avais fait quelques tests sur la disposition des flottants sur deux « colonnes » :
http://web.covertprestige.info/test/15-organiser-serie-de-flottants-en-colonnes-1.html

C'est assez complexe, et encore : je me suis limité à des blocs tous flottants du même côté.

Pour organiser de flottants sur deux colonnes sans créer de grands espaces vides, une solution moyennement satisfaisante est de faire flotter les blocs impairs à gauche, et les blocs pars à droite (ou l'inverse). Le résultat n'est pas parfait, mais c'est déjà pas trop mal. Pas sûr par contre que ça corresponde aux besoins.

Sinon, le comportement d'Internet Explorer 6 avec des blocs tous flottants à gauche, sur deux colonnes et avec clear: left pour un bloc sur deux (à partir de trois colonnes ça part sérieusement en couilles, par contre), semble assez proche du résultat voulu. Mais c'est un comportement bugué et non standard... Smiley rolleyes

Quoi qu'il en soit, on bute sur les limites des flottants, qui ne sont pas prévus pour ce genre d'utilisation fine. D'ailleurs, pas grand chose en CSS2 n'est prévu pour ce genre d'utilisation fine...

Note finale : il est peut-être possible, en javascript, de récupérer la hauteur des deux premiers blocs, et de positionner le troisième bloc en fonction...

Iris

9 Jan 2007 à 23:30

Merci pour cette dernière solution...

Sujet clos

CSS et mise en forme, CSS3

Div sur 2 colonnes