Positioning an element using CSS

Issue

I am working on a project to practice with CSS and HTML. I am having an issue with positioning the map (taken from Google Maps) to the right of the paragraph. I am unable to place it to the right of it, can you help me?

I enclose my HTML and CSS code of the :

.pagina_Homepage {
  border: solid black 2px;
  background-color: rgb(12, 53, 106);
  padding-bottom: 23%;
}

.pagina_Homepage h1 {
  padding-left: 5px;
}

.pagina_Homepage h3 {
  padding-left: 5px;
}

.pagina_Homepage p {
  padding-left: 5px;
  padding-right: 950px;
  display: flex;
}

#Mappa {
  border: solid black 2px;
  padding-left: 10px;
}

<section class="pagina_Homepage">
  <h1>
    Nuove notizie da ComiGames
  </h1>
  <article>
    <h1>Apertura</h1>
    <p>
      *text*
    </p>
    <h3>dove siamo:</h3>
    <iframe id="Mappa" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11318.743987401329!2d12.475192276933928!3d41.909517842779174!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x132f60561ce8c111%3A0x4009bab70f9f732d!2sVia%20del%20Corso%2C%20503%2C%2000187%20Roma%20RM!5e0!3m2!1sit!2sit!4v1700844324759!5m2!1sit!2sit"
      width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
  </article>
</section>

I tried following instructions via ChatGPT to solve the problem, but it did not go as I had hoped, as the other articles I entered in the HTML moved to positions I did not want.

Solution

You can use grid layout with two columns:

.pagina_Homepage p {
    padding-left: 5px;
    /* remove padding-right, we will set it in grid column instead */
    /* padding-right: 950px; */
    display: flex; /* flex is also not necessery */
}

article {
    display: grid;
    /* first column has user specified width, second is flexible */ 
    /* but both columns can have value auto */
    grid-template-columns: 950px auto;
}


#Mappa {
    /* put this block to second column */
    grid-column: 2;
    /* grid-row: <start-row> / <span>; - span is arbitrary larg number here */
    grid-row: 1 / 100;

    /* ... rest of your properties  */
}

This solution, like the one with absolute position, will work in most cases, but is not really dynamic. It uses fixed number for span in grid-row attribute. This span must be bigger than number of rows. Here it is 100, could be just 4. So if I had opportunity to alter html structure I would put all those tags, that need to be on the left side, in to separate container. Because then you have more options for dynamic layout, either with grid, flexbox or even floats.

Another thing is that grid with column that has fixed width of column (like 950px here), is not responsive by default.

Answered By - platlas