Div avec taille fixe et div avec reste de la largeur

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

Bonjour,

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

Code:

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:

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:

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%;
}

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