Utilizing CSS to position elements on a webpage

Currently, I am immersed in a CSS and HTML project aimed at honing my skills. The main challenge I face involves positioning a Google Maps image to the right of a paragraph. Despite several attempts, I have been unable to achieve the desired layout. Can anyone provide guidance on how to resolve this issue?

To give you more context, here are snippets of my HTML and CSS code:

.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!1it!2it!4v1700844324759!5m2!1it!2it"
      width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
      
  </article>
</section>

Despite seeking assistance from ChatGPT to address the issue, my attempts were in vain as the positioning of other articles in the HTML file did not align with my intentions.

htmlcss

Answer №1

To create a layout with two columns using grid, follow these steps:

.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 necessary */
}

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 large number here */
    grid-row: 1 / 100;

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

While this solution works well in most cases, it may not be very dynamic as it requires a fixed value for span in the grid-row attribute. This number must be larger than the actual number of rows, such as here where it's set to 100 but could potentially be just 4. If you have the option to modify the HTML structure, consider placing all items that need to be on the left side into a separate container. This provides more flexibility for creating dynamic layouts using grid, flexbox, or even floats.

Additionally, keep in mind that using a grid with a column of fixed width (like 950px in this case) may not automatically adjust responsively.

Answer №2

To align the map to the right of the page, use the following code:

    #Map {
  border: solid black 2px;
  width: 500px;
  padding: 0px;
  /* Ensure that the width matches with 500px */
  /* To shift it slightly to the left, you can subtract a certain value (e.g. 10px) */
  margin-left: calc(100% - 500px - 10px);
}

Answer №3

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

 #Map {
     border: solid black 2px;
 }
<section class="custom_homepage">
<h1>
    Latest news from ComiGames
</h1>
<article class="container">
    <div class="text">
        <h1>Opening</h1>
        <p>
            *text*
        </p>
        <h3>where we are:</h3>
    </div>
    <iframe id="Map" 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!1it!2it!4v1700844324759!5m2!1it!2it" width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</article>
</section>

This code shows how to position the map on the right side with text aligned to the left.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Semantic UI utilizes floating elements to position them within a

As a beginner with Semantic UI, I have been unable to find any information in the documentation on how to float a simple element without it needing to be nested within another element like a button or a segment. For example, at the bottom of a page, I hav ...

htmlsemantic-ui

Button's focus event doesn't trigger on iPad

I am facing an issue with adding a bootstrap popover to my website. The popover should appear when the user clicks a button using the focus event. This functionality works fine on desktop browsers, but on the iPad, it seems like Safari on iOS does not trig ...

javascripthtmliosbootstrap-4bootstrap-popover

Is there a way to enable scrolling in the background when a modal is open?

I recently designed a bootstrap modal, but I encountered an issue where when it appears, the vertical scrollbar on the background page becomes disabled and the content shifts to the right by the width of the scrollbar. I want to prevent this content shif ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Custom CSS for the Google Maps Circle Object

Currently, I am utilizing the Google Maps Javascript API v3 Circle object to display circles on the map. I am interested in customizing the CSS of this circle by incorporating some CSS animations. Although I am aware that custom overlays can be used for t ...

javascriptcssgoogle-maps-api-3

Using JavaScript to inject PHP variables into multiple <span> elements

I have been searching for a similar query without any luck. Currently, I am attempting to display the number of Twitter/Facebook/RSS followers within a <span>....</span> in my sidebar. To retrieve the follower counts, I am using some PHP scrip ...

phpjqueryhtml

Stop the recurrence of multiple clicks by incorporating a Bootstrap modal popup confirmation

$('button[name="remove_levels"]').on('click', function (e) { var $form = $(this).closest('form'); e.preventDefault(); $('#confirm').modal({ backdrop: 'static', ...

javascriptjqueryhtmlmodal-dialogbootstrap-modal

How to centrally align tabs in Material-UI AppBar using ReactJS

I'm developing a React Application using Material-UI and facing difficulty in centering the 3 tabs within the blue AppBar. Currently, they are aligned to the left like this: (unable to embed images at the moment, apologies) This is the code snippet ...

cssreactjsmaterial-uiappbarcenter-align

Element on navigation bar extending full width of the page

As a fairly new designer, I am facing an issue with my navbar button. Currently, it is only 100 pixels wide and fixed in place, allowing the rest of the page to scroll past it. However, although it is confined to 100PX in width, it still spans across the e ...

htmlcssbuttondisplaynavigationbar

The CSS file is not appearing, causing the styling not to be applied

I've included the following line in my html file: <link rel="stylesheet" href="css/styles.css"> Despite having the css file linked, the styling is not visible on the page. The HTML remains plain. The structure of my files is as follows: file ...

htmlcss

The vertical alignment of the button text with SVG is not properly aligned

I'm facing a challenge in vertically centering text in a button while also using SVG. The text is centered properly when the SVG is removed. How can I maintain the SVG size and still achieve vertical text centering? https://i.sstatic.net/PJRtR.png ...

css

Steps to update the bootstrap version in an existing project

My current project was built using Bootstrap 3.3.6 classes, but now I want to take advantage of the features offered by Bootstrap 5.2. However, simply changing the version of Bootstrap isn't as easy as it sounds. What is the most effective way to upgr ...

csstwitter-bootstraptwitter-bootstrap-3bootstrap-5upgrade

The conditional statement within an AngularJS object is reliant on the selected option within an HTML dropdown menu

I am looking to apply an if condition in an object to capture specific values from two HTML select options. The Angular framework will then post these values to the database based on the user's selection. HTML <tr> <td>En ...

angularjshtml

Encountering the issue "error TS2339: Property 'user' is not available on type 'Object'."

issue TS2339: The property 'user' is not found on the type 'Object'. export class UserAuthentication implements OnInit { user = new BehaviorSubject<Userlogin>(null); constructor( private route: ActivatedRoute, private rou ...

htmlnode.jsangularjsmongodb-query

Varying heights based on the screen size

Currently, I am in the process of designing my website and incorporating some wave elements to enhance the background. However, I've encountered some issues when resizing the screen. Specifically, the waves seem to shift with a space between them as t ...

javascripthtmlcss

Miscalculation in PHP MySQL: Incorrect output when adding field 1 and multiplying field 2 by

In my MySQL table, there are 4 fields: product price cost, selling price, stock of products, and earnings per unit. For example: If the cost of our product is $100, we sell it for $120, and we have a stock of 10 units, the following code calculates the e ...

phpmysqldatabasehtml

Combination of AngularJS and jQuery

I have a page in which additional input fields are dynamically added based on the selection made in a drop-down menu. This page is powered by angularjs, but I had to use jQuery specifically for adding these extra input fields. Here is the HTML code snippe ...

javascriptjqueryhtmlangularjs

The Ember.run.throttle method is not supported by the Object Function as it does not have a throttle method within the Ember.Mixin

I have a controller that has an onDragEvent function: controller = Em.Object.create( { onDragEvent: function() { console.log("Drag Event"); } }); Additionally, I have a Mixin called 'Event': Event = Ember.Mixin.create( { at ...

javascripthtmlember.js

Suggestions for retaining dynamically modified HTML content post-response

My registration form includes input fields for username, email, and more. I have implemented a script that validates the form upon clicking the submit button, turning labels red when fields are empty. However, the submit button is also configured to send a ...

javascripthtmlnode.jsexpress

Using data variables as arguments in the style section of Vue2

Suppose we have a data variable and I want to utilize this data variable for styling purposes. data() { return{ selected:{ index: 2 } } } <style> .parent-table >>> .table-row:nth-child(/* here I intend to use ...

javascriptjquerycssvuejs2vuetify.js

Reiterating the text and determining the length of the string

Currently, the script is capable of calculating the width of the script based on user input and can also determine the width of a string. However, I am facing an issue when attempting to repeat a string entered by the user. For example, if the user input ...

jquerycss