Discussion :

[erox44]

Hello,

deja voici à quoi ressemble le html :

Code html :

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
18
19
20
21
22
23
24
25
26
27
<div id=liste>
	<div id=entete>
		<div><b>titre 1</b></div>
		<div><b>titre 2</b></div>
		<div><b>titre 3</b></div>
		...
		<div><b>titre 20</b></div>
	</div>
 
	<div id=contenu>
		<div class=ligne>
			<div>contenu 1</div>
			<div>contenu 2</div>
			<div>contenu 3</div>
			...
			<div>contenu 20</div>
		</div>
		<div class=ligne>
			<div>contenu 1</div>
			<div>contenu 2</div>
			<div>contenu 3</div>
			...
			<div>contenu 20</div>
		</div>
		...
	</div>
</div>

Ma div "liste" sera en overflow:scroll.

Mes titres dans ma div "entete" et les contenu dans "contenu" ont des largeurs variables, de quelques px et plusieurs centaines.


Mon but ici, c'est donc d'avoir mes deux div "entete" et "contenu" avec une largeur et hauteur adaptée au contenu, donc 2000px s'il le faut, et que le scroll sur x et y de "liste" s'active du coup.

J'ai essayé avec des float:left comme ça :

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
18
19
#liste{
	width: 1100px;
	height: 500px;
	border: 1px solid lightgrey;
	margin-left: 10px;
	overflow: scroll;
}
 
#entete div {
	float : left;
}
 
#contenu .ligne {
	float :left;
}
 
#contenu .ligne div{
	float :left;
}

Mais au niveau largeur ça ne va pas, ça revient à la ligne lorsqu'on arrive à la largeur max du conteneur #liste.



Vous avez des idées ?

[Bisûnûrs]

Alors dans l'ordre :

1. Est-ce des données tabulaires que tu as à afficher ? Si oui, pourquoi ne pas utiliser une vrai tableau ?
2. Si non, tu peux regarder les valeurs table, table-row et table-cell de la propriété display.

[erox44]

Hello,

oui c'est des données tabulaires, j'essaye de faire ça via des div car c'est plus facilement modifiable et il y a moins de différences entre IE et FF par exemple.

Par contre si vraiment je n'arrive pas à faire ce que je veux, ce sera la solution de repli.

[erox44]

Au final je m'en suis sorti avec "display" :

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
#conteneurListe{
	overflow: scroll;
	width: 1100px;
	height: 500px;
	border: 1px solid lightgrey;
	margin-left: 10px;
}
 
#liste{
	display: table;
}
#entete{
	display: table-header-group;
	height: 25px;
	line-height: 25px;
} 
#entete div {
	display: table-cell;
	padding-left: 10px;
}
#contenu{
	display: table-row-group;
} 
#contenu .ligne {
	display: table-row;
}
 
#contenu .ligne div{
	display: table-cell;
	padding-left: 10px;
}