dimenstionnement de div en fonction d'un tableau

**boboss123** · 04/03/2010, 16h18

bonjour,

voici mon code :

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
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
 
/* parametres par defaut */
/* type bloc */
html, body, div, p, h1, h2, h3, table, tr{
	clear:both;
	margin:0;
	padding:0;
	font-size: 1em;
}
th, td{
	margin:0;
	padding:2px 5px;
	font-size: 1em;
}
p{
	padding:2px 5px;
}
 
 
 
#content{
	border:5px solid blue;
}
 
div.my_block{
	float: left;
	margin:10px;
	border: 5px solid black;
}
 
 
div.my_block h3{
	padding:0 0 0 20px;
	font-size: 1em;
	background-color:yellow;
}
 
div.my_block table{
	margin:2px; /* ??? */
	border-collapse:collapse;
	border:none;
}
 
div.my_block th, div.my_block td{
	margin:0;
	border:3px solid white;
}
 
div.my_block th{
	background-color:blue;
	color:white;
}
 
div.my_block td{
	background-color:red;
	color:white;
}
div.my_block p{
	background-color:purple;
}
 
</style>
</head>
 
<body>
 
<div id="content">	
	<p>ceci est du texte 1</p>
 
	<div class="my_block">
		<h3>Mon titre</h3>
 
		<table>
			<thead>
				<tr>
					<th>fdsfdsssdqfsdfsdfsdfqsdfqqsdfsdfqsdfqqsdfsdfqsdfqqdfsdfsdfq</th><th>codsqfdsdfsdfsdfsdfqsdfsdfqqsdfsdfqdsfl2</th><th>cdfsdfsdfsdfqsdfqsdfqsdfsdfsdfol3</th>
				</tr>
			</thead>
 
			<tbody>
				<tr><td>1</td><td>2</td><td>3</td></tr>
				<tr><td>1</td><td>2</td><td>3</td></tr>
				<tr><td>1</td><td>2</td><td>3</td></tr>
				<tr><td>1</td><td>2</td><td>3</td></tr>
				<tr><td>1</td><td>2</td><td>3</td></tr>
				<tr><td>1</td><td>2</td><td>3</td></tr>
				<tr><td>1</td><td>2</td><td>3</td></tr>
			</tbody>
		</table>
 
		<p>salut les gas !</p>
	</div>
 
	<p>ceci est du texte 2<br/>ceci est du texte 3</p>
</div>
 
</body>
 
</html>

Comment faire pour que #content s'elargisse en fonction de la taille de div.my_block ?
=> le probleme est que si div.my_block est trop large, il sort de #content....

merci d'avance

**Erwan31** · 05/03/2010, 23h23

Bonjour,
ça ne devrait pas être le cas avec le code que tu donnes.
Sur quel navigateur as tu ce problème?

**boboss123** · 06/03/2010, 00h17

firefox

Pour moi c'est normal vu que le tableau est dans un bloc de type float.

Je veux que le bloc s'adapte a la taille du tableau donc la seule solution que j'ai trouvée est de le mettre en float mais apres le probleme est que ce bloc ne fait plus parti du flux du div parent...

**Erwan31** · 06/03/2010, 00h27

Pour que content d'adapte, tu dois aussi le rendre flottant.
Pour le dégagement (clear) tu peux l'éviter en ajoutant un overflow:hidden
sur le bloc parent.

**boboss123** · 06/03/2010, 18h30

dans ce cas je suis obligé de mettre tout mon design en float, c'est un peu barbare comme méthode : pas d'autre méthode possible ?

**Erwan31** · 07/03/2010, 00h11

Envoyé par boboss123

dans ce cas je suis obligé de mettre tout mon design en float, c'est un peu barbare comme méthode : pas d'autre méthode possible ?

Si, certaines propriétés permettant d'établir un contexte de formatage dont certaines sont aussi problématique comme position:absolute ou dsiplay:table-cells (non implémenté dans IE6/7).
Tu as deux possibilité : display:inline mais là tu perds les avantages que procure un élément de niveau block.

Ou alors display:inline-block + display:inline; zoom:1 dans IE7- (code à insérer dans une CSS pour IE appelée via les commentaire conditionnels qui vont bien).

**boboss123** · 08/03/2010, 09h11

ça n'a pas l'air de fonctionner le coup du inline (testé sous firefox)...

dimenstionnement de div en fonction d'un tableau

Tableau en CSS

Discussions similaires

Partager

Partager