3 div à côté avec des tailles adaptatives

Logiciel & apps Programmation
1

Bonjour à tous, :slight_smile:

J’ai un site internet avec 3 div côte à côte (styule=“float: left”).
La contrainte est que le premier div ai une taille maximale de 200px, les autres la plus grande taille possible. Donc 2 cas possibles :

  • Si la fenêtre fait moins de 600px, j’affiche les 3 div avec une taille identique (33% chacun)
  • Si la fenêtre fait plus de 600px, le 1er div reste à 200px et les 2 autres div se partage le reste de l’affiche à part égale.

Pour le moment j’ai fait ça avec du javascript.
Est-ce possible de le faire avec du CSS ? :etonne2: Je sais faire des tests de taille d’écran, mais le problème c’est pour l’affectation de la largeur des 2ème et 3ème div. Car ce n’est pas une taille fixe (en px) ni une taille relative (en %) puisque ça dépend de la largeur de l’écran auquel il faut enlever les 200px du 1er div …

Merci d’avance de votre aide :slight_smile:
Edité le 25/02/2015 à 09:05

2

Bonjour,

On ne peut pas mettre un width de 33% pour chacun, et un max-width de 200px pour la première DIV ?

3

En faisant ça, dans le cas d’une fenêtre de taille supérieure à 600px, tout l’espace ne sera pas utilisé.
Par exemple pour une fenêtre de 1000px :

  • 1er div : 200px
  • 2ème div : 1000 * 33% = 330px
  • 3ème div : 1000 * 33% = 330px
    Soit un total de 860px, donc 140px vide …
4

Ah oui, effectivement, il faut que je revois mes mathématiques… :confused:

5

grateurs: à l’époque on utilisait les tableaux, car c’est finalement le comportement que tu attends.

Et dans ton cas, il faut donc utiliser :

display: table sur l’élément parent
display: table-column sur chaque enfant, le premier ayant 200px de largeur, et les autres une largeur calculée en fonction du reste.

Il te faudra peut-être un div intermédiaire, avec display: table-row.

Quant à la taille de fenêtre, tu as les media queries => www.alsacreations.com…

6

On ne peut pas créer deux DIV côte à côte, la DIV de gauche ayant un width de 33% et un max width de 200px ; la DIV de droite n’ayant pas de width défini je suppose qu’elle prendra toute la largeur restant à droite.

Si cette DIV de droite contient deux DIV ayant un width de 50% chacune, est-ce que ces 50% sont bien mesurés par rapport à la DIV les contenant (ou par rapport à la largeur totale de la page) ?

7

En effet passer avec des tableaux fonctionne :slight_smile:

L’astuce, c’est qu’en mettant les div en float:left, si la somme les 3 div dépasse la taille de la fenêtre, le 3ème div se positionne en dessous, alors qu’avec un tableau ce n’est pas le cas. Je peux donc définir pour le 2ème et le 3ème div une taille de 50% pour être sûr qu’ils occupent tout l’espace.

Voilà le code :

#main { //div qui encapsule mes 3 div
  display:table;
  width: 100%;
}
#div1 {
  min-width:200px;
  max-width:200px;
  display:table-cell;
}
#div23 {
  width:50%;
  display:table-cell;
}
@media (max-width: 600px) {
  #div1 {
    min-width:0px;
    width:33%;
  }
  #div23 {
    width:33%;
  }
}

Merci de votre aide :slight_smile: