Discussion :

[andip]

Bonjour,

Cela fait un petit moment que je ne trouve pas la solution à mon probleme que voici:

J'ai un tableau de trois colonnes.je ne parle que de ma colonne de gauche

Dans la colonne de gauche je souhaite mettre des div les uns en dessous des autres.

La largeur des DIV est la meme que celle de la colonne

Pour le 1er DIV, il aura une hauteur variable ( pas de probleme ; propriete min-height ); Par contre je veux qu'il soit placé tout en haut, collé à la ligne du haut de la colonne.

le deuxieme DIV de hauteur variable aussi sera placé en dessous du 1er div .

Et le troisieme DIV de hauteur fixe, sera placé en bas de la colonne, collé à la ligne du bas.

Avec mon code html et mon CSS, je n'arrive pas à fixer le premier div en haut de la colonne, ni le troisieme div en bas de la colonne.

Merci de votre aide

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
<table id="conteneur">
 
            <tr>
                                         <!-- menu gauche -->
                <td id="menu_gauche">
                        <div id="mode">
                            menu de gauche -->
                            Je peux alors mélanger les balises à ma convenance,<br />
                            Je peux alors mélanger les façons d'écrire,<br />
                            corps du texte <br />
                        </div>
 
                         <div id="defilimages">
 
                        </div>
 
 
 
                        <div id="forum">
                            <a href="page1.html"> Forum </a>
                        </div>
                </td>  
 
               <td>
 
                ici c'est ma colonne du milieu
 
               </td>
 
 
 
               <td>
 
                ici c'est ma colonne de droite
 
              </td>
 
           </tr>
 
       </table>

Code css :

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
#conteneur /* le tableau contenant les 3 parties */
   {
   background-image:url("images/fond4.jpg");
   min-height:100%;
   margin-left:5%;
   margin-right:5%;
   border:solid 2px black;
   border-collapse:collapse;
   }
 
 #menu_gauche   /* 1er <td> : menu de gauche contenant #mode, #defilimages, #forum */
 {
  position: relative;
  min-height: 100%;
  width:14%;
  color:black;
  border :solid red 2px;
 }
 #mode
    {
    vertical-align:top;
    background-image:url("images/fond4.jpg");
    border:outset 3px #050b0e;
    color:white;
    min-height:200px;
  }
 
 
 #defilimages
    {
    width:100%;
    min-height:50%;
    background-image:url("images/village4.jpg");
  }
 #forum
    {
    width:100%;
    height:40px;
    background-color:green;
    text-align:center;
    color:white;
   }

voici une image jointe de ce que je souhaite obtenir