Aligner des divs dans une div sur UNE ligne

Version imprimable

Bonjour à tous

Voici le problème sur lequel je suis en train de m'arracher les cheveux :

Je veux afficher des divs les uns à la suite des autres dans un autre div. Je les pose donc côte à côte et lorsque j'arrive à la largeur du div contenant, les divs que je rajoute "passent à la ligne". Je voudrais faire en sorte qu'ils restent plutôt sur une seule et unique ligne.

Plutôt qu'un long discours, voici un code test qui décrit ma situation :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <html> <head> <title>exemple</title> </head> <body> <center> <div style="border:2px solid #564110; height:150px; width:80%; overflow-x:scroll; background-color:#FFFFFF" > <div style=\"position:relative; top:10px; left:10px; width:150px; height:90px; float:left; border:1px solid #000\"> <center> aaaaaaa </center> </div>"; </div> </center> </body> </html>
Merci beaucoup

07/09/2011, 08h35
Isythiel

Et avec le <table> ? je ne connais pas la réponse en CSS mais quand je suis face à cette problématique j'utilise un tableau html :oops:
07/09/2011, 09h26
identifiant_bidon

Isythiel : Ouais, tu as raison c'est pas une mauvaise idée!! J'essayerai de me pencher du côté de l'élément table dès que j'ai un moment et je vous dis ce que ça donne.

Merci
07/09/2011, 09h53
Dominique49

ouais mais avec un tableau, ça va être horriblement raide.
non, il faut mettre l'attribut float: left sur les div intérieurs.
Ils vont ainsi "s'empiler" à la suite des autres, de gauche à droite.
c'est ce qu'on utilise pour les menus horizontaux ;)

ah oui, aussi, désires-tu que la taille du div "père" s'adpate à la taille des div intérieurs ?
07/09/2011, 09h56
Isythiel

Qu'est-ce que tu veux dire par raide ? Tu peux adapter la taille des cellules du tableau selon le nombre de cellules en php ... et même en JS si besoin...

D'ailleurs si tu jettes un oeil à son code, et notamment au style de ses cellules, tu observeras qu'il a déjà tenté le float:left; ...

La problématique est de faire tenir toutes les cellules sur une même ligne, quelque soit le nombre de cellules. Et donc d'adapter les cellules et non le div père.

Donc à moins que tu n'aies la solution en CSS, le tableau HTML me semble une bonne alternative.
07/09/2011, 10h27
Dominique49

oups pardon, je n'avais pas compris qu'il voulais justement empêcher le passage à la ligne ... par "raide", j'entendais que dans le cas où il voudrais rajouter une cellule quelque part, ça risque de tout décaler ...
mais effectivement, cela me paraît la meilleure solution ... à moins de régler la taille des div intérieur en pourcentage, par exemple 24% si il faut en faire tenir 4 ... mais ça demande de savoir d'avance le nombre de "cellules", ce qui n'est pas toujours le cas ..
07/09/2011, 10h28
identifiant_bidon

Voila, comme le dit Isythiel, j'ai déjà essayé le float:left et la taille du div père n'est pas dépendante de la taille des divs intérieurs. En gros, je le laisse tel quel. 8-)

Merci tout de même Dominique ;)

Edit : le nombre de divs internes peut être assez grand. j'aurai donc un scroll horizontal dès que ça dépassera. 24% pour 4 divs ne me conviendra pas...
07/09/2011, 11h17
rivsc

Citation:

Donc à moins que tu n'aies la solution en CSS, le tableau HTML me semble une bonne alternative.

La solution CSS est le display:table-cell; pour les div et display:table-row; pour le conteneur. C'est carrément mieux qu'un <table> destiné à afficher un tableau :-)
07/09/2011, 11h23
identifiant_bidon

rivsc merci pour ta réponse.

Il y a des trucs à supprimer par rapport au code que j'ai mis + haut ? (parce que là, ça m'affiche n'importe quoi !! :mouarf: ).

Et ce sont des propriétés valables avec la plupart des navigateurs ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<html>
<head>
	<title>exemple</title>
</head>
<body>
<center>
<div style="border:2px solid #564110; height:150px; width:80%;background-color:#FFFFFF;display:table-row;" >
<div style=\"display:table-cell;border:1px solid #000\">
				  <center>
					  aaaaaaa  
				  </center>   
			  </div>
</div>
</center>
</body>
</html>

Comme ça ?

07/09/2011, 11h32
identifiant_bidon

Non, le div contenant doit avoir une taille fixe (on pourrait lui mettre une largeur absolue d'ailleurs plutôt qu'un pourcentage).
Les divs qui sont à l’intérieur aussi, ont une largeur fixe.

Pour faire clair :
Disons que le div contenant a une largeur de 1000px. Chaque div à l’intérieur a une largeur de 200px. Quand on en a moins de 5, ils sont côte à côte et tout roule. Quand on en met plus de 5, il doit y avoir un scroll horizontal au niveau du div contenant et les tailles n'ont pas changé.
07/09/2011, 11h44
Invité

Bonjour,
[Edit] Oups ! non...

ps : enlève tes balises <center> et remplace-les par un style text-align:center; sur les div

Bon, j'ai essayé la solution avec table

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<head>
	<title>exemple</title>
</head>
<body>
<center>
<div style="border:2px solid #564110; height:150px; width:80%; overflow-x:scroll; background-color:#FFFFFF" >
<table cellpadding="0" cellspacing="0" border="1" style="padding-top:15px">
	<tr height="100px">
<td width=\"130px\">
				  <center>
					  aaaaaaa  
				  </center>   
			  </td>
	</tr>
</table>
 
</div>
</center>
</body>
</html>

Marche pas non plus ...:cry:

Re.
Je t'ai trouvé une solution :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html lang="fr">
<head>
<title>test</title>
<meta charset="utf-8">
 
	<style type="text/css">
#div-conteneur {
        position:relative; /* obligatoire */
        overflow-y:auto; 
        margin:0 auto; /* centrage horizontal */
        height:150px; 
        width:1000px; 
        border:2px solid #564110; 
        background-color:#FFFFFF
}
.div-oneline {
        position:absolute; /* obligatoire */
        top:10px;
        width:150px; 
        height:90px; 
        border:1px solid #000; 
        text-align:center; /* centrage texte */
}
        </style>
 
</head>
<body>
 
<?php   // textes des divs
        $textehtml = array(
                                0 => 'aa aaaaa',
                                1 => 'bbbbb bbb',
                                2 => 'ccccc cccc cccc',
                                3 => 'dddddd ddddddd',
                                4 => 'eeeee',
                                5 => 'fff fffffff ff',
                                6 => 'ggggggggg',
                                7 => 'hhh hhhhhhh hhhh',
                                8 => 'iiii iiiiiii',
                                9 => 'jjjjjjjj jjjjj'
                                );
?>
<div id="div-conteneur">
<?php   // afichage des divs
        for ($indice=0; $indice < 10; $indice++) {
?>
	<div class="div-oneline" style="left:<?php echo (10+150*$indice); ?>px;">
		<?php echo $textehtml[$indice]; ?>
	</div>
<?php
        }         
?>
</div>
 
</body>
</html>

Les divs sont en position absolue par rapport au conteneur.
On les décale horizontalement de (10+150*$indice) px.

ps : on peut aussi les espacer en mettant : (10+(150+10)*$indice) px (espacement 10px entre les divs)

Super merci jreaux62 :ccool:

En fouillant sur le net, je vois que le souci revient souvent.

J'ai à mon tour trouvé une solution. En fait, j'utilise l'élément table proposé plus haut par Isythiel. L'astuce est de mettre une image transparente dans chaque cellule. L'image a une largeur de la taille de la cellule et une hauteur de 1 px.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <html> <head> <title>exemple</title> </head> <body> <center> <div style="border:2px solid #564110; height:150px; width:80%; overflow-y:scroll; background-color:#FFFFFF" > <table cellpadding="0" cellspacing="0" border="1" style="padding-top:15px"> <tr height="100px"> <td width=\"130px\"> <center> <img src=\"d.gif\" width=\"130\" height=\"1\"/>qssq </center> </td> </tr> </table> </div> </center> </body> </html>

J'avais mal compris ta demande. Je pense que ceci correspond mieux, tu peux réglé le width:Xpx; en php. J'ai rien trouvé de mieux (full html, css)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
<head>
	<title>exemple</title>
 
  <style type="text/css">
    .parent{
      border:2px solid #564110; 
      height:185px; 
      width:1000px;
      background-color:#FFFFFF;
      width:1000px;
      overflow-x:scroll;
      overflow-y:hidden;
    }
    .parent2{
      height:200px;
      width:5000px;
    }
    .child{
      width:150px;
      height:150px;
      border:1px solid #000;
      display:inline-block;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="parent2">
      <div class="child">aaaaaaa</div>
      <div class="child">aaaaaaa</div>
      <div class="child">aaaaaaa</div>
      <div class="child">aaaaaaa</div>
      <div class="child">aaaaaaa</div>
      <div class="child">aaaaaaa</div>
      <div class="child">aaaaaaa</div>
      <div class="child">aaaaaaa</div>
      <div class="child">aaaaaaa</div>
      <div class="child">aaaaaaa</div>
    </div>
  </div>
</body>
</html>

Re.
Bien que je pense (pour une fois !) que mon code est le plus "correct" (html+CSS), la version avec la <table> est très acceptable, considérant qu'on a ici des données tabulaires.

Voici de quoi améliorer ton code :
- code html plus "propre",
- codes html et php séparés,
- et surtout "image parasite" supprimée, par l'utilisation de min-width:130px; sur le td
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <!DOCTYPE HTML"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>exemple</title> </head> <body> <div style="margin:0 auto; border:2px solid #564110; height:150px; width:80%; overflow-y:scroll; background-color:#FFFFFF" > <table cellpadding="0" cellspacing="0" border="1" style="padding-top:15px"> <tr style="height:100px;"> <?php for ($indice=0; $indice < 25; $indice++) { ?> <td style="width:130px; min-width:130px; text-align:center;"> qssqqsdf sdfq sdfqsdf </td> <?php } ?> </tr> </table> </div> </body> </html>
Testé IE8, Firefox, Safari, Chrome, Opera. (important : il faut indiquer le doctype, surtout pour IE sinon ca ne va pas)
-> A TESTER sur IE <= 7 (min-width n'est peut-être pas bien supporté)

Citation:

Envoyé par rivsc

.parent2{
width:5000px;
}

Le souci est là.
Il faudrait effectivement l'indiquer dynamiquement en PHP, en fonction du nombre de divs intérieurs. (sinon, la barre de scroll s'affiche pour les 5000px...)

07/09/2011, 18h06
NoSmoking

Citation:

Envoyé par jreaux62

Testé IE8, Firefox, Safari, Chrome, Opera. (important : il faut indiquer le doctype, surtout pour IE sinon ca ne va pas)
-> A TESTER sur IE <= 7 (min-width n'est peut-être pas bien supporté)

sous IE7, il est nécéssaire de rajouter dans le style de la table table-layout:fixed; pour quelle prenne en compte la largeur prédéfinie des TD