Discussion :

[windmastr26]

Salut à tous !

Une question bateau surement, mais où je bataille depuis plusieurs heures...

Je souhaite avoir la disposition suivante :



(Oui je sais, ça fait très chauvin, mais c'est juste pour mieux voir les div )

Donc : 2 div à droite, largeur définie à 220px, et un div à gauche, largeur non définie et dont la largeur s'adapte en fonction de la fenêtre.

Voici donc le code source :

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
<HTML>
 <HEAD>
  <STYLE type='text/css'>
    div#colonneGaucheAccueil {
      margin:7px;
      border:solid 1px;
      float:left;
      margin-right:500px;
    }
 
    div#colonneCentreAccueil {
      float:right;
      width:220px;
      margin-right:250px;
      margin:7px;
      border:solid 1px;
    }
 
    div#colonneDroiteAccueil {
      float:right;
      width:220px;
      margin:7px;
      border:solid 1px;
    }
  </STYLE>
 </HEAD>
 <BODY>
  <DIV id='colonneGaucheAccueil' style='height:200px;background:#9999FF'>
   <TABLE width='100%'><TR><TD>Hello</TD></TR></TABLE>
  </DIV>
  <DIV id='colonneDroiteAccueil' style='height:200px;background:#FF9999'>
  </DIV>
  <DIV id='colonneCentreAccueil' style='height:200px'>
  </DIV>
 </BODY>
</HTML>

Et voici le résultat réel :



Où est-ce que je suis me suis loupé ? J'ai bien essayé d'enlever le "margin-left:500px" mais ça ne change strictement rien.

Mettre les éléments en absolute, non plus.

Merci pour vos lumières !

[sebhm]

Bonjour,

essaie comme ca :

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
<html>
 <head>
  <style type='text/css'>
    div#colonnegaucheaccueil {
      margin:7px;
      border:solid 1px;
      margin-right:500px;
    }
 
    div#colonnecentreaccueil {
      float:right;
      width:220px;
      margin-right:250px;
      margin:7px;
      border:solid 1px;
    }
 
    div#colonnedroiteaccueil {
      float:right;
      width:220px;
      margin:7px;
      border:solid 1px;
    }
  </style>
 </head>
 <body>
  <div id='colonnedroiteaccueil' style='height:200px;background:#ff9999'>
  </div>
  <div id='colonnecentreaccueil' style='height:200px'>
  </div>
  <div id='colonnegaucheaccueil' style='height:200px;background:#9999ff'>
   <table width='100%'><tr><td>hello</td></tr></table>
  </div>
 </body>
</html>

je met la colonne gauche à la fin dans le code HTML, et je ne la mets pas en float.

[windmastr26]

Ouééé ! Ça marche nikel !

J'avais même pas pensé à changer l'ordre de mes div dans le corps de ma page... Honte à moi !

Un grand merci à toi sebhm