Discussion :

[ddami1]

Bonjour,

Je souhaiterai avoir une div avec une taille fixe sur la droite et une autre à sa gauche qui prenne le reste de la largeur de la page.

J'ai réussi à faire ça avec une position absolute sur la div de droite (cf exemple ci dessous) mais mon but serait de faire ça sans position absolute.
https://jsfiddle.net/41cr3bq3/

Je bloque un peu là dessus, c'est possible? Comment?

Merci

[Invité]

Bonjour,

il faut éviter de mettre des position:absolute; à trot et à travetrs...

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
<div id="contentWrap">
  <div id="contentLeft">
    fgfh fdgfdh fdjgifdig gifdig gifihfdi hifdi hifd jihjifhi fjihjfdijhi jihdfjihj fdijhifdjhi jifdjhifdj ijhfdijhifdj ijhdifjhi jidfjhidfh ijdihfjifdhi jifdjhidjfihjfd fgfh fdgfdh fdjgifdig gifdig gifihfdi hifdi hifd jihjifhi fjihjfdijhi jihdfjihj fdijhifdjhi
      jifdjhifdj ijhfdijhifdj ijhdifjhi jidfjhidfh ijdihfjifdhi jifdjhidjfihjfdfgfh fdgfdh fdjgifdig gifdig gifihfdi hifdi hifd jihjifhi fjihjfdijhi jihdfjihj fdijhifdjhi jifdjhifdj ijhfdijhifdj ijhdifjhi jidfjhidfh ijdihfjifdhi jifdjhidjfihjfdfgfh fdgfdh
      fdjgifdig gifdig gifihfdi hifdi hifd jihjifhi fjihjfdijhi jihdfjihj fdijhifdjhi jifdjhifdj ijhfdijhifdj ijhdifjhi jidfjhidfh ijdihfjifdhi jifdjhidjfihjfdfgfh fdgfdh fdjgifdig gifdig gifihfdi hifdi hifd jihjifhi fjihjfdijhi jihdfjihj fdijhifdjhi
      jifdjhifdj ijhfdijhifdj ijhdifjhi jidfjhidfh ijdihfjifdhi jifdjhidjfihjfdfgfh fdgfdh fdjgifdig gifdig gifihfdi hifdi hifd jihjifhi fjihjfdijhi jihdfjihj fdijhifdjhi jifdjhifdj ijhfdijhifdj ijhdifjhi jidfjhidfh ijdihfjifdhi jifdjhidjfihjfdfgfh fdgfdh
      fdjgifdig gifdig gifihfdi hifdi hifd jihjifhi fjihjfdijhi jihdfjihj fdijhifdjhi jifdjhifdj ijhfdijhifdj ijhdifjhi jidfjhidfh ijdihfjifdhi jifdjhidjfihjfdfgfh fdgfdh fdjgifdig gifdig gifihfdi hifdi hifd jihjifhi fjihjfdijhi jihdfjihj fdijhifdjhi
      jifdjhifdj ijhfdijhifdj ijhdifjhi jidfjhidfh ijdihfjifdhi jifdjhidjfihjfdfgfh fdgfdh fdjgifdig gifdig gifihfdi hifdi hifd jihjifhi fjihjfdijhi jihdfjihj fdijhifdjhi jifdjhifdj ijhfdijhifdj ijhdifjhi jidfjhidfh ijdihfjifdhi jifdjhidjfihjfdfgfh fdgfdh
      fdjgifdig gifdig gifihfdi hifdi hifd jihjifhi fjihjfdijhi jihdfjihj fdijhifdjhi jifdjhifdj ijhfdijhifdj ijhdifjhi jidfjhidfh ijdihfjifdhi jifdjhidjfihjfdfgfh fdgfdh fdjgifdig gifdig gifihfdi hifdi hifd jihjifhi fjihjfdijhi jihdfjihj fdijhifdjhi
      jifdjhifdj ijhfdijhifdj ijhdifjhi jidfjhidfh ijdihfjifdhi jifdjhidjfihjfdfgfh fdgfdh fdjgifdig gifdig gifihfdi hifdi hifd jihjifhi fjihjfdijhi jihdfjihj fdijhifdjhi jifdjhifdj ijhfdijhifdj ijhdifjhi jidfjhidfh ijdihfjifdhi jifdjhidjfihjfdfgfh fdgfdh
      fdjgifdig gifdig gifihfdi hifdi hifd jihjifhi fjihjfdijhi jihdfjihj fdijhifdjhi jifdjhifdj ijhfdijhifdj ijhdifjhi jidfjhidfh ijdihfjifdhi jifdjhidjfihjfd
  </div>
  <div id="contentRight">
fgfh fdgfdh fdjgifdig gifdig gifihfdi hifdi hifd jihjifhi fjihjfdijhi jihdfjihj fdijhifdjhi jifdjhifdj ijhfdijhifdj ijhdifjhi jidfjhidfh ijdihfjifdhi jifdjhidjfihjfd fgfh fdgfdh fdjgifdig gifdig gifihfdi hifdi hifd jihjifhi fjihjfdijhi jihdfjihj fdijhifdjhi
    jifdjhifdj ijhfdijhifdj ijhdifjhi jidfjhidfh ijdihfjifdhi jifdjhidjfihjfdfgfh fdgfdh fdjgifdig gifdig gifihfdi hifdi hifd jihjifhi fjihjfdijhi jihdfjihj fdijhifdjhi jifdjhifdj ijhfdijhifdj ijhdifjhi jidfjhidfh ijdihfjifdhi jifdjhidjfihjfdfgfh fdgfdh
    fdjgifdig gifdig gifihfdi hifdi hifd jihjifhi fjihjfdijhi jihdfjihj fdijhifdjhi jifdjhifdj ijhfdijhifdj ijhdifjhi jidfjhidfh ijdihfjifdhi jifdjhidjfihjfdfgfh fdgfdh fdjgifdig gifdig gifihfdi hifdi hifd jihjifhi fjihjfdijhi jihdfjihj fdijhifdjhi jifdjhifdj
    ijhfdijhifdj ijhdifjhi jidfjhidfh ijdihfjifdhi jifdjhidjfihjfdfgfh fdgfdh fdjgifdig gifdig gifihfdi hifdi hifd jihjifhi fjihjfdijhi jihdfjihj fdijhifdjhi jifdjhifdj ijhfdijhifdj ijhdifjhi jidfjhidfh ijdihfjifdhi jifdjhidjfihjfdfgfh fdgfdh</div>
</div>

Solution 1 :

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
#contentWrap { 
  display:table;
width:100%;
}
#contentLeft {
  display:table-cell;
  background-color:yellow;
  padding:2%;
}
#contentRight {
  display:table-cell;
  width:300px; /* largeur fixe */
  background-color:green;
  padding:2%;
}

Solution 2 :

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
#contentWrap {
  display: flex;
  width: 100%;
}
 
#contentLeft {
  background-color: yellow;
  padding: 2%;
}
 
#contentRight {
  width: 300px; /* largeur fixe */
  background-color: green;
  padding: 2%;
}

[ddami1]

Merci pour ta réponse Jreaux62

La solution 1 fonctionne bien à priori, c'est le résultat attendu, merci.

Par contre, avec la seconde solution, la div verte ne prend pas la bonne largeur.
Mais peu importe, ta solution 1 me convient

Encore merci