Aligner des divs dans une div sur UNE ligne

**identifiant_bidon** · 07/09/2011, 07h35

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Isythiel** · 07/09/2011, 08h35

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

**identifiant_bidon** · 07/09/2011, 09h26

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

**Dominique49** · 07/09/2011, 09h53

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 ?

**Isythiel** · 07/09/2011, 09h56

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.

**Dominique49** · 07/09/2011, 10h27

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 ..

**identifiant_bidon** · 07/09/2011, 10h28

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.

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...

Aligner des divs dans une div sur UNE ligne

HTML

Vue hybride

Discussions similaires

Partager

Partager