pourquoi ?

https://jsfiddle.net/bmjLv7sx/

merci

Ton min-width fonctionne très bien, mais l'unité vw s'adapte en fonction de la largeur de la fenêtre donc dans ce cas, c'est inutile de spécifié width et min-width puisque tu leurs donnent la même valeur "réactive".

Peace,

D accord merci.

Et du coup comment faire pour que le premier bloc est une largeur fixe de 20vw et le deuxième de 30vw tout le temps. Que je ne puisse pas le rétrécir ?

Salut,

Tant que tu utilises vw, ça va rétrécir ou s'agrandir. C'est une valeur relative (à la largeur du viewport), donc quand tu réduis ou augmente la largeur, tes blocs vont s'agrandir pour faire toujours 20/100 ou 30/100 de la largeur de celui-ci.

Si tu veux des unités absolues, utilise du pixel. Exemple: https://jsfiddle.net/jnv8psf2/ 

Si tu veux que le bloc fasse une taille relative MAIS ne puisse pas descendre en-dessous d'un certain seuil, alors c'est min-width + des valeurs absolues qu'il te faut : https://jsfiddle.net/ya6m07L8/

De cette façon, ton bloc fait la taille (width) relative définie, tant qu'il n'atteint pas la taille minimale (min-width) définie de façon fixe.

(Remarque au passage que j'utilise flexbox plutôt que des position absolute ; évite d'utiliser position: absolute tant que ce n'est pas absolument nécessaire).

-
Edité par EmmanuelBeziat 27 janvier 2020 à 16:27:33

Bonjour,

J'avais fais un beau petit code mais j'ai ete devancé par @Emmanuel. Tant pis je le met quand meme

<div class="container">
  <div id="block1"></div>
  <div id="block2"></div>
  <div id="block3"></div>
</div>

et le CSS

.container
{
  display:flex;
  min-height:100vw;
}

#block1 {  
  width:20vw;
  background-color:red;
}

#block2 {
  width:30vw;
  background-color:green;
}

#block3 {
  width:50vw;
  background-color:blue;
}

Idem je l'ai fait en flex mais tu peux aussi utiliser float. Et pareil, j'ai enleve les positions Absolute ... Trop casse gueule à mon gout 

Ok merci

Mais si je veux rajouter un bandeau en haut, je suis obligé d'utiliser absolute non ?

https://jsfiddle.net/e5c2sqax