Bonjour a toute et a tous !

J'ai un petit problème : je souhaite créer deux bloc de taille identique pour pouvoir insérer d'autres éléments en dessus.

Voici le block bleu, je souhaite qu'il fasse la même taille que le l'image !

Sinon a cause de mon code la suite se rajoute mal ! comme ceci :

Voici mon code :

  <div class="Prestation">
    <div class="prestation_droite">
      <div class="text">
        <h1>Le co-working</h1><br>
        <p>Le text explicatif est a mettre ici avec en plus les avantages de passer par smile</p>
      </div>
      <img src="team_working.jpg">
    </div>
    <div class="prestation_gauche">
      <div class="text">
        <h1>Le co-working</h1><br>
        <p>Le text explicatif est a mettre ici avec en plus les avantages de passer par smile</p>
      </div>
      <img src="team_working.jpg">
    </div>
  </div>

.Prestation{
    margin-top:  50px;
    width: 95%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.Prestation .prestation_droite .text{
    width: 50%;
    float:left;
    background-color: blue;
}

.Prestation .prestation_droite img{
    width: 50%;
    float: right;
}

.Prestation .text h1{
    font-size: 2.2em;
    font-weight: bold;
    color:#41A6A0;
}

.Prestation .prestation_gauche .text{
    width: 50%;
    float:right;
}

.Prestation .prestation_gauche img{
    width: 50%;
    float: left;
}

Merci d'avance !

-
Edité par Dorian_lll 20 septembre 2022 à 16:26:44

Bonjour,

Tu peux le faire facilement en utilisant les flexbox, voici un exemple : https://codepen.io/MewenLeHo/pen/abGwqYE?editors=1100

=> seul le bloc de droite possède une hauteur définie et le bloc de gauche s'adapte à cette hauteur.

PS : mais je me demande si ce ne serait pas plus logique de le faire en grid plutôt qu'en flex...

Exemple avec grid : https://codepen.io/MewenLeHo/pen/oNdwEJa?editors=1100

-
Edité par Mewen_bzh 20 septembre 2022 à 16:50:01

Bonjour,

n'utilise pas float, maintenant on a flexbox

Par contre, avec ton html, je ne comprends pas trop ton besoin : tu veux avoir du texte à gauche et une image à droite ? Parce que ce n'est pas du tout ce que tu auras avec tes "prestation_gauche" et "_droite". Tu peux préciser, par exemple avec un schéma qui montre ce que tu veux ?

Autre chose : une image ne sort jamais sans son alt. Si l'image est uniquement décorative, un alt vide peut faire l'affaire.

Merci de vos réponses. Je vais utiliser flexbox alors !

Je veux faire ça Lamecarlate :

-
Edité par Dorian_lll 20 septembre 2022 à 16:49:40