Mettre une carte à côté d'un texte en CSS / HTML

Bonjour,

Si tu utilises un attribut id en html (<div id="map">), il faut alors utiliser le sélecteur #map en css à la place de .map pour cibler cet élément.

Les balises <div> et <span> ne sont pas interchangeables.
La balise <div> permet de diviser le contenu, c'est une balise de type block comme <header>, <footer>, <form>, ...
La balise <span> est souvent utilisé pour mettre du texte en exergue, c'est une balise de type inline comme <italic>, <strong>, <small>, ...
Regarde la doc de chaque balise pour en apprendre plus.
Tu peux aussi regarder le premier exemple de cette page puis les autres liens en bas : https://developer.mozilla.org/fr/docs/Web/HTML/Inline_elements

Le positionnement en css est un sujet vaste avec une longue histoire.
Il peut être utile de connaitre un minmum le flux normal des éléments avec la propriété display (block, inline) ainsi que l'utilisation des propriétés float et position.
Pour le positionnement et la mise en page, le mieux est désormais d'utiliser le système de grille (CSS Grid) et/ou Flexbox.
Tu peux trouver pleins de cours ou guide sur ses sujets, par exemple sur https://developer.mozilla.org/fr/docs/Learn/CSS/CSS_layout mais aussi sur d'autres sites.

Bonjour, 

est-ce que vous pourriez m'expliquer plus précisément quelle balise je dois utiliser pour appliquer un CSS à une map s'il vous plaît ? 

J'ai essayé d'appliquer le display: flex ou grid et cela fonctionne pas.

Je ne sais pas si c'est dû au fait que ce soit une map et non du texte ou si c'est parce que la balise <div id="map"> ne s'applique pas à la balise avec le lien (<iframe html..) 

J'ai également essayé en mettant la balise CSS .iframe et #iframe mais ça fonctionne pas plus. 

Comme je fais le site dans le cadre d'un devoir universitaire je n'ai pas trop le temps de me renseigner plus sur le CSS, alors je voulais surtout savoir s'il est possible d'appliquer du CSS à une map /:

Tu peux trouver plusieurs exemples simples sur w3schools :
https://www.w3schools.com/howto/howto_css_two_columns.asp
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_two_columns_flex

Pas sûr que le css soit un bon choix si tu n'a pas le temps d'en apprendre les rudiments ;)
Essaye de te familiariser avec les sélecteurs css. Le sélecteur iframe permet de cibler toutes les balises iframe. Le sélecteur .map iframe permet de cibler les balises iframe qui sont dans une balise qui possède la classe map. Tu peux aussi définir une classe ou un id directement sur ta balise iframe.

L'outil Inspecteur dans les outils de développement de ton navigateur peut également t'aider pour voir et tester le code css de chaque balise directement dans ton navigateur.

En reprenant un exemple simple avec flexbox : 

<div class="row">
  <div class="col col-text">
    
    <p>Un peu de texte</p>
    
  </div>
  <div class="col col-map">
    
      <iframe src="https://www.google.com/maps/embed?pb=%211m18%211m12%211m3%211d3002692.759847931%212d-1.7960103852222407%213d42.69700498086493%212m3%211f0%212f0%213f0%213m2%211i1024%212i768%214f13.1%213m3%211m2%211s0x12a8a48b202023d5%3A0x1711d86785a522d6%212zUHlyw6luw6llcw%215e0%213m2%211sfr%212sfr%214v1677083986076%215m2%211sfr%212sfr" width="600" height="450" style="border:0;" allowfullscreen=""  referrerpolicy="no-referrer-when-downgrade"></iframe>
    
  </div>
</div>

* {
  box-sizing: border-box;
}

.row {
  display: flex;
}

.col {
  flex: 50%;
}

.col-text {
  text-align: center;
}

.col-map iframe {
  width: 100%;
  height: 450px;
}