table et div a droite

Version imprimable

12/04/2013, 00h33
keybon

table et div a droite
Bonjour,

je suis en train de designer mon site et j'aimerais avoir une div a droite, ainsi que le reste (une table, ou autre element) soit a gauche.

pour le moment ma div a droite a pour css :
Code:

1 2 3 4 .right-side { float: right; margin-left: 10px; }
et a gauche ma table a pour css :
Code:

1 2 3 4 5 #table1{ border-bottom: 0px; border-spacing:0; margin-top: 10px; }
-> donc rien de special au niveau du positionnement

Mon probleme est que des que je redimensionne la fenetre, si la taille de la fenetre est plus petite que la taille de ma div a droite + la taille minimum de ma table, ma table descend en dessous de ma div de droite... j'aimerais que si la taille de ma table est a son minimum (que je n'ai d'ailleurs jamais specifiee), les blocs restent a leur place et ne se chevauchent pas... mais j'ai vraiment du mal!!!

Bonjour,

Il suffit de faire flotter les 2 éléments à gauche comme ceci:

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>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.right-side {
    float: left;
    margin-left: 10px;
    border: 1px solid navy;
}
table{ 
    float: left;
}
</style>
</head>
<body>
 
<table width="80%" border="1" cellspacing="2" cellpadding="2">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<div class="right-side">
<ul>
<li>Element</li>
<li>Element</li>
<li>Element</li>
  </ul>
   </div>
</body>
</html>

12/04/2013, 16h43
keybon

Bonjour,

Je viens d'essayer ce que vous m'avez dit mais ca fait toujours le meme probleme, des que la taille de la fenetre est plus petite que la somme de la taille de la table et du module de droite, c'est maintenant le module de droite qui se positionne en dessous de la table... :cry:

Alors essayez ça, vu que c'est plus clair...

Table et table-cell s'adaptent aux dimensions fluides.

Note: les couleurs, dimensions et bordures sont des repères pour info:

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
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
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#container {
        width: 100%;
        border: 1px solid red;
        display:table;
}
.right-side {
    margin-left: 10px;
    border: 1px solid navy;
        display:table-cell;
}
table{ 
        width:50%;
        padding:0;
        margin:0;
        display:table-cell;
}
td {
        background:pink;
        width:20%;
}
</style>
</head>
<body>
<div id="container"> 
<table>
  <tr>
    <td>lorem</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<div class="right-side">
<ul>
<li>Element</li>
<li>Element</li>
<li>Element</li>
  </ul>
   </div>
   </div>
</body>
</html>