What is the best way to align my title and content beside an image?

I'm having trouble aligning my title and text next to the image on my website. Can anyone lend a hand? Thank you!

This is the final design I am aiming for: Desired Result

Here is my CSS code:

section .articleactu {
    display: ;
    position: relative;
    margin-left: 0px;
}

.articleactu img {
    max-width: 100%;
    margin-left: 420px;
    margin-top: 10%;
    border-radius: 15px;
    width: 14%;
}

.articleactu p {
    display: flex;
    margin-left: 420px;
}

.articleactu h2 {
    margin-left: 420px;
}

and here's my HTML code:

<section>
<article class="articleactu">
  <h2> L'ACTUALITÉ </h2>
  <div class="g">
      <img src="images/gtaarticle.jpeg" alt="Article GTA déçu" class="center">
    <p>GTA : THE TRILOGY DEFINITIVE EDITION, les fans sont déçus ! </p>
    <p>Il y a pleins de bugs dans le jeu qui agacent les joueurs</p>
    <p>Publié le 25 novembre</p>
</article>
</section>
htmlcss

Answer №1

body {
      font-family: sans-serif;
    }

    section {
      border-bottom: 1px solid #ccc;
      padding: 24px;

    }
    .articleactu {
      grid-column: 1 / -1;
      grid-gap: 36px;
      display: grid;
      grid-template-columns: 200px auto;
      flex-direction: column;
    }

    .articleactu img {
      border-radius: 15px;
     max-width: 200px;

    }
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />

</head>

<body>
  <section>
    <h2> Latest News </h2>
    <article class="articleactu">
      <img src="https://i.sstatic.net/cTwUc.jpg" alt="Disappointed GTA Article" class="center">
      <div>
        <p>GTA : THE TRILOGY DEFINITIVE EDITION, disappointing fans!</p>
        <p>There are many bugs in the game that annoy players</p>
        <p>Published on November 25th</p>
      </div>

    </article>
  </section>

</body>


</html>

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

Finding the current URL of an iframe and storing it in a JavaScript variable

Hi everyone, I'm new to JavaScript and I have encountered a problem. <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <iframe name=&apos ...

javascripthtmliframe

Avoiding page refresh while submitting a form can be tricky, as both e.preventDefault() and using a hidden iFrame seem

I've been stuck on this issue for a while now, scouring Stack Overflow and Google for solutions, but nothing seems to be working. My main goal is to avoid page reloads after uploading a file because it resets the dynamic HTML I need to display afterwa ...

javascripthtml

Is there a way to automatically adjust the positioning of added pins on an image as I scroll through the image?

I have inserted a large image onto my HTML page and to manage its size, I am displaying it within a div that allows for scrolling like a map. Using jQuery, I have placed 3 markers on the image. The issue I am facing is that when I scroll the image, the ma ...

javascriptjqueryhtmlcss

jQuery's draggable and resizable functionality with containment provisions is designed to

I'm struggling to create a resizable and draggable div using jQuery, but it's proving to be quite buggy in its implementation. Despite finding similar questions, I haven't come across a solution yet. How can I fix the containment bug when ...

javascriptjquerycssjquery-ui

What is the best way to add a div container to a particular section of a webpage?

I have come across many solutions that involve using JQuery, but I am specifically looking for a pure JS method. Currently, I create a div, add content to it using Create Element and innerHTML, and then use appendChild to place it at the bottom of the body ...

javascripthtmlgoogle-chrome-extension

Individual ".htaccess" and ".htpasswd" files are created for every webpage

I have a main page with links to 3 other pages (all within the same folder) named: content1.html, content2.html, and content3.html. <html> <body> <ul> <li><a href="content1.htm">content1</a></li> <li> ...

html.htaccess

Having difficulty adjusting the size of open-iconic icons in Bootstrap

I recently added the open iconic plugin to my project and I'm trying to adjust the size of the icon. While the original library has a property to change the size, it doesn't seem to work with the Bootstrap version. Is there an alternative way to ...

csstwitter-bootstraptwitter-bootstrap-3bootstrap-4iconic

Using HTML5 Canvas to draw intersecting polygons

Recently, I came across a polygon drawing function that caught my attention: Polygon.prototype.draw = function(ctx) { ctx.save(); ctx.beginPath(); var v = this.vertices[0] ctx.moveTo(this.position.x + v.x, this.position.y + v.y); var i ...

javascripthtmlcanvasdrawingrendering

Leveraging ajax for showcasing page content in a floating div container

I am in need of creating a button on my page that, when clicked, will display a floating div above the page and load another internal page. I believe this can be achieved using Ajax, but I have no experience with it and don't know where to start. Her ...

javascriptcssajax

PHP mail function malfunctioning when trying to send images

When using the PHP mail function to send email attachments, I'm encountering an issue where only the file name is displayed in the email instead of the actual image. <?php //if "email" variable is filled out, send email if (isset($_REQUEST ...

phphtmlemail

How can you change the alignment of items from vertical to horizontal using Bootstrap?

I'm looking to create a responsive layout similar to the design of duckduckgo.com. This page features a logo, the DuckDuckGo brand name in text form, and a search box. When I reduce the width of the browser window to nearly horizontal bar size, the th ...

csstwitter-bootstrap

The Bootstrap dropdown menu unexpectedly appears in front of the panel located above

Having trouble with the Bootstrap dropdown panel. My web page has 4 main panels, each containing additional bootstrap panels. When I open one panel at a time, everything works fine. However, when I try to open multiple panels simultaneously, the positions ...

htmlcssheightdropdownbootstrap-4

Upon hitting submit, the form remains unresponsive

I have been developing a permissions system for my NodeJS project (Using the SailsJS MVC) and encountered an issue. After resolving my initial error as detailed here, I am now facing a problem where the form is unresponsive. It neither shows an error in th ...

javascripthtmlangularjsnode.jssails.js

The module cannot be located due to an error: Package path ./dist/style.css is not being exported from the package

I am facing an issue with importing CSS from a public library built with Vite. When I try to import the CSS using: import 'rd-component/dist/style.css'; I encounter an error during the project build process: ERROR in ./src/page/photo/gen/GenPhot ...

cssreactjstypescriptvite

Retrieve the scrolling height in Vue.js 2 window

I need to apply the sticky class to the navbar when a user scrolls down, and remove it when they scroll back up. To achieve this, I am attempting to calculate the scrolled height. Currently, my code looks like: mounted(){ this.setUpRoutes(); wind ...

javascripthtmlvue.js

What is the best way to vertically center a column of images on mobile devices in a responsive manner?

Currently, I am developing an application that showcases the 9 newest photos with a specific tag. To ensure consistency in image sizes, I have set each photo to be 240px wide and 200px tall. My query now is how can I vertically center these images so they ...

jqueryhtmlcsstwitter-bootstrap

The HTML element containing a React variable is failing to render ASCII characters

I am encountering an issue where a custom title, received and set in a JS variable, is displaying the ASCII code instead of the symbol. To illustrate, here is a basic example of the render function: render() { var title = "My Title&#8482;" retur ...

javascripthtmlreactjsascii

The filter feature is not functioning properly within my application

I have encountered an issue within my app. I have a filter that is supposed to search through two listviews, but for some reason, I am only getting results from the first listview and not the second. Can anyone help me identify what I did wrong? <ul ...

jqueryhtmltouchjquery-mobile

Creating a multi-column layout for list items using Bootstrap. Unusual behavior observed (see demo in JSBIN

I am struggling to display items in multiple columns without any strange formatting issues. Can someone help me out? Check out the JSBin for reference: http://jsbin.com/huzurejunu/1/edit?html,css,output https://i.sstatic.net/DxJpW.png <div class="ro ...

csstwitter-bootstrap-3

What are the advantages of utilizing CSS pseudo-elements "before" and "after" over just using span tags?

After conducting my research, it seems that CSS pseudo-elements ::before and ::after function similarly to nested span tags within a parent element. However, some sources suggest that they can be highly beneficial and even necessary in certain scenarios. ...

htmlcsspseudo-element