[Résolu] Classe avec height:auto et reprendre ce height pour une autre

Bonjour,

J'ai une sorte de tableau à une ligne et 2 colonnes, dont la bordure extérieure est visible. (ce n'est pas un tableau mais des div .. j'aimerai garder cette structure).

        <div class="texte-auszeichnungen-1 box-auszeichnungen1">
            <div class="int-texte-auszeichnungen-1">
            <div class="titre-auszeichnungen"> <?php echo $nom_auszeichnung; ?> </div>
                <?php echo $information_auszeichnung; ?>
            </div>
        </div> <!-- fin texte-auszeichnungen-1 box-auszeichnungen1 -->

        <div class="photo-auszeichnungen-1 box-auszeichnungen1 ">
        	<div class="photos-auszeichnungen " >
        		<div class="photos-auszeichnungen-1 box-photos-auszeichnungen-1">
                         <img alt=" " src="<?php echo $photog_auszeichnung; ?>" />
                        </div>
              </div>
        </div> <!-- fin photo-auszeichnungen-1 box-auszeichnungen1 -->

J'ai du texte dans la première colonne et dans la deuxième j'ai une image.
J'ai fixé height = 120px pour les 2.

.texte-auszeichnungen-1 { width: 40%; 	border-top: solid 2px #89120f; border-left: solid 2px #89120f; border-bottom: solid 2px #89120f; background-color: #f0ede1; float: left; height: 120px;}

.photo-auszeichnungen-1 {width: 340px; 	border-top: solid 2px #89120f; border-right: solid 2px #89120f; border-bottom: solid 2px #89120f;  background-color: #f0ede1; float: left; height: 120px;}

Quand je réduis la fenêtre du navigateur, le texte va s'étendre vers le bas.
Et il sera coupé car la hauteur de 120px ne suffit pas.
Je met donc la hauteur en auto.
Mais du coup, avec la partie de droite, dont la hauteur est toujours de 120px, cela crée un décalage.

Je voudrais savoir si c'est possible d'avoir en css :

.texte-auszeichnungen-1 { height: auto;}
.photo-auszeichnungen-1 {height: "height de texte-auszeichnungen-1" ;}

merci pour vos conseils !

Timama

Bonjour,

Et pourquoi ne pas utiliser le module Flexbox ? Ça résoudrait ce problème de hauteur en gardant la souplesse d'un "height: 100%".

Bonjour et merci Greg_Lumiere pour ton conseil.

Je ne connais pas ce module. Je vais aller voir de ce pas....

merci beaucoup ! je reviens ici pour dire si ça fonctionne bien (avec mon cas de figure)

Cherche encore...... EN TEST

alors, avec ce code

<div class="auszeichnungen">

<div class="texte-auszeichnungen-1 box-auszeichnungen1">
            <div class="int-texte-auszeichnungen-1">
            <div class="titre-auszeichnungen"> <?php echo $nom_auszeichnung; ?> </div>
                <?php echo $information_auszeichnung; ?>
            </div>
        </div> <!-- fin texte-auszeichnungen-1 box-auszeichnungen1 -->

        <div class="photo-auszeichnungen-1 box-auszeichnungen1 ">
        	<div class="photos-auszeichnungen " >
        		<div class="photos-auszeichnungen-1 box-photos-auszeichnungen-1">
                         <img alt=" " src="<?php echo $photog_auszeichnung; ?>" />
                        </div>
              </div>
        </div> <!-- fin photo-auszeichnungen-1 box-auszeichnungen1 -->
	<div class="auszeichnungen">

et le module Flexbox, j'ai donc modifié mon css

/* là j'ai juste ajouté display:flex*/
.auszeichnungen {
	height:auto;
	overflow: hidden;
	top:0px;
	left:0px;
	margin:0px auto; 
    position: relative;
	display: flex;}

.texte-auszeichnungen-1 { width: 40%; 	border-top: solid 2px #89120f; border-left: solid 2px #89120f; border-bottom: solid 2px #89120f; background-color: #f0ede1; float: left; margin: 0;
padding: 0;/*height: 120px;*/}
.texte-auszeichnungen-1 p { margin-top:3px; text-align:left !important}
.photo-auszeichnungen-1 {width: 340px; 	border-top: solid 2px #89120f; border-right: solid 2px #89120f; border-bottom: solid 2px #89120f;  background-color: #f0ede1; float: left;margin: 0;
padding: 0; /*height: 120px;*/}

Et cela fonctionne.... ! encore peut être des espace à régler....

merci beaucoup Greg_Lumiere ! c'est un module que je ne connaissais pas.

Mais de rien

Bonne continuation !

merci beaucoup !