Deux div qui utilise toute la largeur possible dont 1 div en max-width

Hello je vous rejoins sur ce forum pour obtenir de l'aide et aussi, si je peux en donner

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.

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

Merci
Modifié par userdev (13 Oct 2014 - 17:41)

Bonjour,

Le principal problème est que deux éléments en inline-block vont - par défaut - subir un espace insécable : http://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html

Donc tu n'auras pas 70% + 30%, mais 70% + 30% + "quelque chose"

Une idée rapide, de tête, et sans tester :

.dphoto {
    float: left;
    width:30%;
    max-width:160px;
}
.ddetail {
    overflow: hidden;
    border-top:solid 1px #999999;
    border-bottom:solid 1px #999999;
}

L'intérêt de overflow: hidden est de créer un "BFC" : http://www.alsacreations.com/astuce/lire/1543-le-contexte-de-formatage-block-en-css.html

J'espère que je n'ai pas oublié quelque chose

Bonne chance !

Hello Raphael, et merci pour ta réponse.

je n'ai pas bien compris pour les espaces insécables posent un soucis dans le cas que je décris car il reste plutot de la place non utilisée que de la place en trop (70 + 30 + "quelque chose").
Puis, j'ai utilisé le commentaire HTML pour eliminer l'espace.

Le problème c'est que quand le div 1 atteint max-width 160px (dans une grande résolution écran) alors le div 2 ne prend pas toute la largeur disponible restante puisqu'il est bloqué à 70% et qu'il y a plus de 70% de largeur restante. J'espère que je suis plus clair et que tu pourra m'éclairer

merci

hum... as-tu regardé du côté du display: table-cell?

userdev a écrit :
je n'ai pas bien compris pour les espaces insécables posent un soucis dans le cas que je décris car il reste plutot de la place non utilisée que de la place en trop (70 + 30 + "quelque chose").

Je parlais simplement du code existant, où tu as 2 blocs de 30% et de 70%

userdev a écrit :
Le problème c'est que quand le div 1 atteint max-width 160px (dans une grande résolution écran) alors le div 2 ne prend pas toute la largeur disponible restante puisqu'il est bloqué à 70% et qu'il y a plus de 70% de largeur restante.

Dans ma proposition de code ci-dessus (que j'ai vérifiée depuis), le problème ne se pose pas puisque je n'ai indiqué nulle part la largeur du div 2

userdev a écrit :

hum... as-tu regardé du côté du display: table-cell?

C'est également une (bonne) solution, mais forcera les deux div à avoir la même hauteur. Ce n'est peut-être pas ce qui est souhaité.

juliesunset a écrit :
hum... as-tu regardé du côté du display: table-cell?

Hello, oui le display: table-cell peut servir (j'ai pas testé dans mon cas) mais je voulais conserver le inline-block, j'ai déja testé le repositionnement pour support a basse résolution (je bascule en block) et ça fonctionne alors avec le table cell je pense pas pouvoir facilement faire basculer un element en dessous de l'autre, en tout cas pas testé.

Raphael a écrit :

Dans ma proposition de code ci-dessus (que j'ai vérifiée depuis), le problème ne se pose pas puisque je n'ai indiqué nulle part la largeur du div 2

ok, et comme pas de largeur, le div prend toute la place restante.
Je vais tester, car je ne vois pas comment je conserve le div 2 en ligne par rapport au div 1 alors qu'on a virer le display:inline-block.
Et je vois également comment ça réagit sur plusieurs résolution.

Je vous tiens au courant.
A+
Modifié par userdev (14 Oct 2014 - 17:44)

userdev a écrit :
je ne vois pas comment je conserve le div 2 en ligne par rapport au div 1 alors qu'on a virer le display:inline-block.

Parce que le div 1 est flottant

userdev a écrit :


Hello, oui le display: table-cell peut servir (j'ai pas testé dans mon cas) mais je voulais conserver le inline-block, j'ai déja testé le repositionnement pour support a basse résolution (je bascule en block) et ça fonctionne alors avec le table cell je pense pas pouvoir facilement faire basculer un element en dessous de l'autre, en tout cas pas testé.

Cela ne pose aucun souci : Il suffit de modifier les display: table-cell en... display: block

Alors tu t'en es sorti ?
Modifié par Raphael (20 Oct 2014 - 13:14)

Raphael a écrit :
Alors tu t'en es sorti ?

Salut, désolé j'étais passé sur une autre page et j'ai pas eu le temps d'ajuster ce détail.

Alors j'ai testé ta solution, et oui le div deux prends systématiquement la place restante, ça c'est ok.
Par contre, vu que je vire le inline block, je ne peux plus centrer verticalement
Et le but est que le contenu du div 2 soit au milieu de l'image.

Je teste la solution 2.

A tout de suite

Juste une petite précision pour l'utilisation de table cell, est-on obligé d'utiliser également display:table ainsi que display:table-row ?

re, je n'arrive pas a obtenir ce que je veux avec le display:table et table-cell.

En fait si : je met la cellule 1 avec une largeur max (pour desktop) et je bloque la largeur minimum :

width:15%;
min-width:50px;

En diminuant la fenetre du navigateur la photo bloque bien a 50px et la cellule 2 s'ajuste automatiquement, jusque la c'est bon.

Par contre dans la cellule 2, comme je l'ai indiqué plus haut, j'ai egalement 3 div en ligne, et c'est trois div je n'arrive pas a leur faire prendre toute la largeur dispo du div 2.

        <div id="content-body-wrapper">
                    <div id="content-body">
                                    <div id="primary-nav"><img src="~/Images/photo_identite.jpg" /></div>
                                    <div id="content">
                                        <div class="contentd1"></div>
                                        <div class="contentd2"></div>
                                        <div class="contentd3"></div>
                                    </div>
                    </div>
        </div>

#content-body-wrapper {    display:table;    
                           border-collapse:collapse;
                           width:100%;
}         

#content-body {    
    display:table-row;
}         

#primary-nav,  #content {
        display:table-cell;
}         

#primary-nav {
        background-color:red;
        width:15%;
        min-width:50px;
}         

#primary-nav img {
        width:100%;
}         

#content {    
    background-color:blue;
}


.contentd1 {
    display:table-cell;
    border:solid 1px yellow;
    width:35%
}
.contentd2 {
    display:table-cell;
    border:solid 1px yellow;
    width:25%
}
.contentd3 {
    display:table-cell;
    border:solid 1px yellow;
    width:40%
}

35 + 25 + 40, je devrais obtenir la largeur totale et ce n'est pas le cas.
Modifié par userdev (22 Oct 2014 - 11:49)