table et div a droite

**keybon** · 12/04/2013, 01h33

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 :

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

1
2
3
4
.right-side {
    float: right;
    margin-left: 10px;
}

et a gauche ma table a pour css :

Code :

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

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

**rodolphebrd** · 12/04/2013, 09h56

Bonjour,

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

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

**keybon** · 12/04/2013, 17h43

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

**rodolphebrd** · 12/04/2013, 18h49

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

table et div a droite

Tableau en CSS

Vue hybride

Discussions similaires

Partager

Partager