Deux divs qui utilisent toute la largeur disponible dont 1 div en max-width pixel

**userparis** · 13/10/2014, 11h00

Hello,

j'aimerai utiliser toute la largeur disponible pour 2 div dont 1 qui est en max-witdh défini en pixel.
Les div sont en lignes, le premier contient une image, je bloque la largeur max de ce div à 160px pour pas que l'image soit trop large en grande résolution et fixe la largeur à 30 %.
Pour le deuxième div j'aimerai qu'il prenne toute la place restante et lui est fixé à 70% sa largeur.

Le problème c'est que quand le div 1 atteint 160px le div deux ne prend pas toute la place

J'ai essayé avec les largeur min et max du div 2 mais sans succès.

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
16
17
18
19
.dphoto {
    display:inline-block;
    width:30%;
    max-width:160px;
}
 
.dphoto img{
    vertical-align:middle;
    width:100%;
 
}
 
.ddetail {
    display:inline-block;
    vertical-align:middle;
    width:70%;
    border-top:solid 1px #999999;
    border-bottom:solid 1px #999999;
}

help svp

**rvm31** · 16/10/2014, 22h46

Salut
Je en suis pas certain d'avoir tout compris, mais je vais essayé d'apporter un début de réponse
si tes deux div sont intégré l'une dans l'autre comme ci dessous

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class="dphoto>
<div class="ddetail"></div>
</div>

c'est normal que la deuxième div n'occupe pas tout l'espace puisqu'elle est limité à 70% de la div dphoto

**userparis** · 27/10/2014, 10h18

Hello,

non pas tout à fait :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<div class="divmembre">
      <div class="dphoto"><img src="~/Images/photo_identite.jpg" /></div>
      <div class="ddetail">
            <div class="ddetaild nom">nom</div>
            <div class="ddetaild prenom">prénom</div>
            <div class="ddetaild mail">mail@bbbb.com</div>
      </div>
</div>

**NoSmoking** · 27/10/2014, 10h36

Bonjour,
pourquoi pas simplement

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.dphoto {
    display:inline-block;
    width:30%;
    max-width:160px;
    float:left; /* AJOUTER */
}
.ddetail {
/*    display:inline-block;/* MODIFIER */
    display:block;
    vertical-align:middle;
/*    width:70%;/* SUPPRIMER */
    border-top:solid 1px #999999;
    border-bottom:solid 1px #999999;
}

**userparis** · 28/10/2014, 15h22

Bonjour nosmoking,

je viens de relire mon topic et je n'ai pas expliqué correctement ce que je veux faire (

)

il y a trois div dans le div 2, qui doivent également être en ligne (en desktop) et basculer les un en dessous des autres en basse résolution.

Il faut donc ajouter quelque chose au code que tu proposes. je teste aussi un float left sur ces trois div et je vous dis.

Merci

**userparis** · 28/10/2014, 15h46

j'ai réussi a obtenir les trois div en ligne dans le div 2 (display inline block et un width renseigné sur le premier et le deuxieme, le troisieme prends la place restante), par contre je perd le vertical align... Et comme la photo a une hauteur plus grande, le rendu est très moyen.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<div class="divmembre">
  <div class="dphoto"><img src="~/Content/themes/image/photo_identite.jpg" /></div>
  <div class="ddetail">
    <div class="ddetaild nom">nom</div>
    <div class="ddetaild prenom">prenom</div>
    <div class="ddetaild mail">mail@bbbb.com</div>
  </div>
  <div class="clear"></div>
</div>

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
 
.dphoto {
    /*display:inline-block;   MODIF*/
    float:left;   /*MODIF*/
    width:20%;
    max-width:130px;
    border:solid 1px #999999;
}
 
.ddetail {
    /*display:inline-block;   MODIF*/
    display:block;
    vertical-align:middle;
    /*width:75%; MODIF*/
    border-top:solid 1px #878A88;
    border-bottom:solid 1px #878A88;
    padding-top:20px;
    padding-bottom:20px;
    padding-left:10px;
    margin-left:10px;
}
.ddetaild {
    display:inline-block;
}
 
.nom {
    /*annuler puce par défaut*/
    /*float:left;*/
    width:30%;
    padding-left:10px;
}
 
.prenom {
    /*annuler puce par défaut*/
    /*float:left;*/
    width:25%;
}
 
.mail {
 
}

**NoSmoking** · 29/10/2014, 12h01

il y a trois div dans le div 2, qui doivent également être en ligne (en desktop) et basculer les un en dessous des autres en basse résolution.

Un simple display:inline-block ne sera pas suffisant pour faire "basculer" les 3 éléments en mode block et quand même en utilisant les mediaQueries certaines DIVs risquent de passer sous l'image.

Dans ton cas je pense que le passage par un display:table-cell qui se transforme en display:table-row en fonction de la largeur de l'écran devrait convenir.

Sur base de la structure suivante

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<div class="divmembre">
    <div class="dphoto">
        <img src="~/Content/themes/image/photo_identite.jpg" alt="">
    </div>
    <div class="ddetail">
        <div>nom</div>
        <div>prenom</div>
        <div>mail@bbbb.com</div>
    </div>
</div>

on commence par déclarer données communes pour les 2 conteneurs importants

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.dphoto,
.ddetail {
  height:6em;               /* hauteur commune */
  box-sizing:border-box;    /* prise en compte des border dans la largeur */
}

on s'occupe du conteneur de l'image, rien de bien spécial

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.dphoto{
  float:left;
  width:10em;
  border-right:solid 1px #FFF;
  text-align:center;
  line-height:6em;
  overflow:hidden;
}

l'image maintenant, c'est sur elle que l'on met les contraintes de taille.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.dphoto img{
  max-width:8em;            /* fixe la largeur maximale ( environ 130, 16*8=128)*/
  max-height:100%;          /* pas de dépassement vertical */
  vertical-align:middle;    /* pour centrage vertical */
}

Concernant le conteneur de droite, celui des infos, son utilisera un calcul pour la largeur et on le déclare en display:table.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.ddetail{
  display:table;
  width:calc(100% - 10em);  /* occupation reste de la ligne */
}

les éléments qui le constituent seront déclarés eux en display:table-cell, plus 2-3 bricoles de mise en forme, pas nécessaire de leur affecter une classe

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
.ddetail div {
  display:table-cell;
  vertical-align:middle;
  text-indent:1em;          /* margin et padding étant inopérant */
  width:33%;                /* partage de la place */
  line-height:2em;          /* hauteur ligne = hauteur parent/3 */
}

pour finir il faut bien que cela change d'aspect au rétrécissement de la page donc avec par exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
/* la partie repositionnement */
@media (max-width:600px) {
  .ddetail div {
    display:table-row;      /* changement cell en row */
  }
}

les DIVs passeront l'une sous l'autre et à coté de l'image.

Pour en terminer, le fichier de test complet

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[CSS] post #d1475029</title>
<meta name="Author" content="NoSmoking">
<style>
html, body{
  font:1em/1.25em Verdana;
}
.divmembre {
  background:#EEF;
  border-color:#ABC;
  border-style:solid;
  border-width:1px 0 1px 0;
  margin-bottom:0.5em;
}
.dphoto,
.ddetail {
  height:6em;               /* hauteur commune */
  box-sizing:border-box;    /* prise en compte des border dans la largeur */
}
.dphoto{
  float:left;
  width:10em;
  border-right:solid 1px #FFF;
  text-align:center;
  line-height:6em;
  overflow:hidden;
}
.dphoto img{
  max-width:8em;            /* fixe la largeur maximale ( environ 130, 16*8=128)*/
  max-height:100%;          /* pas de dépassement vertical */
  vertical-align:middle;    /* pour centrage vertical */
}
 
 
.ddetail{
  display:table;
  width:calc(100% - 10em);  /* occupation reste de la ligne */
}
.ddetail div {
  display:table-cell;
  vertical-align:middle;
  text-indent:1em;          /* margin et padding étant inopérant */
  width:33%;                /* partage de la place */
  line-height:2em;          /* hauteur ligne = hauteur parent/3 */
}
/* la partie repositionnement */
@media (max-width:600px) {
  .ddetail div {
    display:table-row;      /* changement cell en row */
  }
}
</style>
</head>
<body>
<div class="divmembre">
    <div class="dphoto">
        <img src="http://www.developpez.net/template/images/logo.png" alt="">
    </div>
    <div class="ddetail">
        <div>nom</div>
        <div>prenom</div>
        <div>mail@bbbb.com</div>
    </div>
</div>
 
<div class="divmembre">
    <div class="dphoto">
        <img src="http://www.developpez.net/forums/avatars/405341-nosmoking.gif?dateline=1401036420" alt="">
    </div>
    <div class="ddetail">
        <div>nom</div>
        <div>prenom</div>
        <div>mail@bbbb.com</div>
    </div>
</div>
 
<div class="divmembre">
    <div class="dphoto">
        <img src="http://club.developpez.com/webdesign/Rubriques/Web/CSS/mini_logo_cours_css.gif" alt="">
    </div>
    <div class="ddetail">
        <div>nom</div>
        <div>prenom</div>
        <div>mail@bbbb.com</div>
    </div>
</div>
<div class="divmembre">
    <div class="dphoto">
        <img src="http://club.developpez.com/webdesign/Developpez.com/Portail/proposer-actu1-v2.gif" alt="">
    </div>
    <div class="ddetail">
        <div>nom</div>
        <div>prenom</div>
        <div>mail@bbbb.com</div>
    </div>
</div>
</body>
</html>

nota: même sur les navigateurs "obsolètes" cela devrait rendre correctement.

**userparis** · 30/10/2014, 17h23

Hello,

j'étais en trin de poster pour dire que c'était ok (testé mozilla) avant que je me souvienne de tester sur IE et ça marche pas sur IE9 (8 non testé...).

Le calc n'as pas l'air de passer sur IE puisque le deuxieme div ne prend pas la place restante.

Je pense que je vais revenir sur la solution que j'avais a l'origine (je devais perdre environ 20 % de largeur dispo

) parce que je suis en train de perdre pas mal de temps sur ce point, sauf si tu as une idée rapide pour rendre compatible IE.

Merci et bonne fin d'après midi.

**NoSmoking** · 30/10/2014, 20h06

Il va te falloir te résoudre à de la dégradation gracieuse concernant IE8, il ne reconnait pas les mediaQueries, sauf à passer par du javascript!

Concernant IE9 il semblerait effectivement qu'il ne prenne pas en charge calc() sur des éléments en display:table mais tu peux t'en sortir en englobant celui ci dans un conteneur.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div class="conteneur">
    <div>
        <div>nom</div>
        <div>prenom</div>
        <div>mail@bbbb.com</div>
    </div>
</div>

et en transférant le CSS

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
.conteneur{
  height:6em;
  margin-left: 10em;
  width:calc(100% - 10em);  /* occupation reste de la ligne */
}
.conteneur > div{
  display:table;
  width:100%;
}
.conteneur > div div {
  display:table-cell;
  vertical-align:middle;
  text-indent:1em;          /* margin et padding étant inopérant */
  width:33%;                /* partage de la place */
  line-height:2em;          /* hauteur ligne = hauteur parent/3 */
}

sorry, pas testé je n'ai pas IE9 !

**userparis** · 31/10/2014, 16h44

Hello,

Envoyé par NoSmoking

Il va te falloir te résoudre à de la dégradation gracieuse concernant IE8, il ne reconnait pas les mediaQueries, sauf à passer par du javascript!

Bon je pense que c'est pas trop genant, mais arrete moi si je dis des betises :

En desktop, Pour IE8, a moins de tomber sur des résolution 800 px (ou la j'ai besoin de passer par les media queries pour ré agencer), on devrait être souvent sur des résolutions corrects, est-ce que je me trompe ?

La question est je pense, Trouve t-on beaucoup de navigateur IE 8 sur basse résolution (tablette et smartphone) ?

Je teste avec le conteneur pour IE9.

Merci

**NoSmoking** · 31/10/2014, 17h20

On parle également de redimensionnement de l'écran donc tout est possible même si peu probable.

Trouve t-on beaucoup de navigateur IE 8 sur basse résolution (tablette et smartphone) ?

Grand dieu que nenni...!

**userparis** · 31/10/2014, 17h41

OK.

C'est bon pour le div conteneur.

Dernier point a t-on la possibilité de faire le clear uniquement en CSS plutot que d'avoir a ajouter des div vide ?

Avec After: ?

Merci

**rodolphebrd** · 31/10/2014, 22h10

Oui.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.container:after {
    content:'';
    display:block;
    clear: both;
}

**NoSmoking** · 01/11/2014, 18h04

Dans ton cas je ne vois pas l'utilité de mettre un élément supplémentaire en clear:both attendu que le conteneur est dans le flux.

Deux divs qui utilisent toute la largeur disponible dont 1 div en max-width pixel

Dimensionnement en CSS

Discussions similaires

Partager

Partager