Question 292487 in Html Question posted in
Some basic documentation can be found here.

Html – Positioning an element using CSS

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 :

HTML

<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>

CSS

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

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.

Tags:

4

Answers


  1. 0

    This code should bring the map to the right of the page:

        #Mappa {
  border: solid black 2px;
  width: 500px;
  padding: 0px;
  /* the 500px here should be the same as the width */
  /* if you want to move it to the left slightly, you can just substract some value (in this case i did 10px) */
  margin-left: calc(100% - 500px - 10px);
}
    Login or Signup to reply.
  2. 0

    1. You missed </section> to enclose your section.

    2. Set position:relative for .pagina_Homepage, this will make it become positioned ancestor for #Mappa. Read more about CSS position – developer.mozilla.org

    3. Set position:absolute for #Mappa and adjust its location:

      #Mappa {
  top:0;
  right:0;
  position: absolute;
  /* your other css */
}
    Login or Signup to reply.
  3. 0 
    .pagina_Homepage {
   border: solid black 2px;
   background-color: rgb(12, 53, 106);
   padding-bottom: 23%;
}

.container {
    display: flex;
    justify-content: space-between;
}

.text {
    padding: 5px;
    width: 60%;
 }

 #Mappa {
     border: solid black 2px;
 }
    <section class="pagina_Homepage">
<h1>
    Nuove notizie da ComiGames
</h1>
<article class="container">
    <div class="text">
        <h1>Apertura</h1>
        <p>
            *text*
        </p>
        <h3>dove siamo:</h3>
    </div>
    <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>

    This is a way you can place the map to the right and keep the text to the left

    Login or Signup to reply.
  4. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search