How can I have the same size both side using <hr>?

Question

Here's my problem if I don't use a <br> after <hr> my image goes away like this:

So I added the <br> , and now I have this result:

I used some margin to reduce the size of the blank space, but I'd like to be close such as this result I designed:

Here's my HTML code:

 .articleactu { grid-column: 1 / -1; grid-gap: 36px; display: grid; grid-template-columns: 190px auto; flex-direction: column; }.articleactu img { border-radius: 15px; max-width: 200px; } p { word-wrap: break-word; max-width: 650px; } p1 { line-height: 30px; font-weight: bold; } p2 { font-size: 14px; font-weight: bold; color: #662189; } hr.solid { margin-top: -10px; width: 480%; opacity: 12%; }

 <img src="images/vanguard.jpeg" alt="Article GTA " class="center"> <div> <p1>CALL OF DUTY: VANGUARD: Est-il bon?</p1> <p> Les avis des fans de la saga sont mitigés et ça peut se comprendre, plusieurs bugs ont été détectés et empêche les joueurs de jouer convenablement...</p> <p2> Publié le 25 novembre 2021 </p2> </div> <hr class="solid"> <br> <img src="images/marvel.jpg" alt="Article GTA " class="center"> <div> <p1>MARVEL AVENGERS: Le personnage de Spider-Man bientôt dans le jeu.</p1> <p> Les fans demandent, Square Enix donne. En effet, Spider-Man sera bientôt jouable dans le jeu sortit il ya peu via DLC...</p> <p2> Publié le 25 novembre 2021 </p2> </div>

Thanks in advance for your help !

Answer 1

Here is a flexbox sample of your code and need some change, good luck.

 .flex-container { display: flex; flex-direction: column; align-content: flex-start; height: 100%; padding: 15px; gap: 5px; }.flex-container > div{ border-radius: 5px; padding: 8px; }.articleactu { grid-column: 1 / -1; grid-gap: 36px; }.articleactu img { border-radius: 15px; max-width: 200px; } p { word-wrap: break-word; max-width: 650px; } p1 { line-height: 30px; font-weight: bold; } p2 { font-size: 14px; font-weight: bold; color: #662189; } hr.solid { margin: 10px auto 10px auto; width: 100%; opacity: 12%; }

 <div class="flex-container"> <div> <img src="https://via.placeholder.com/250" alt="Article GTA " class="center"> <p1>CALL OF DUTY: VANGUARD: Est-il bon?</p1> <p> Les avis des fans de la saga sont mitigés et ça peut se comprendre, plusieurs bugs ont été détectés et empêche les joueurs de jouer convenablement...</p> <p2> Publié le 25 novembre 2021 </p2> </div> <hr class="solid"> <div> <img src="https://via.placeholder.com/250" alt="Article GTA " class="center"> <p1>CALL OF DUTY: VANGUARD: Est-il bon?</p1> <p> Les avis des fans de la saga sont mitigés et ça peut se comprendre, plusieurs bugs ont été détectés et empêche les joueurs de jouer convenablement...</p> <p2> Publié le 25 novembre 2021 </p2> </div> <hr class="solid"> </div>

Answer 2

One approach is as follows, though bear in mind I've taken the liberty of replacing the non-standard HTML elements, <p1> and <p2> , replacing them with the valid <p> element:

 /* a simple reset, in order to ensure all elements have the same defaults: */ *, ::before, ::after { box-sizing: border-box; color: #030; font: 1rem/1.5 sans-serif; margin: 0; padding: 0; }.wrapper { /* we're using CSS flex-box layout: */ display: flex; /* we want the content to wrap, as the <img> and <div>, containing the text, are visually adjacent, but we want the content to appear in a vertical orientation: */ flex-wrap: wrap; width: 90vw; margin: 0 auto; /* defining a visual separation between elements: */ gap: 1em; }.wrapper img { /* defining the width of the <img> element: */ width: 200px; /* along with setting that <img> to fully-cover its available dimension in the layout: */ object-fit: cover; } /* defining styles for <img> elements that aren't successfully loaded */.wrapper img:empty { border: 2px solid currentColor; background-image: repeating-linear-gradient(45deg, transparent 0 10px, #ccc 10px 15px); text-align: center; } /* here we style the <div> elements that follow the <img> elements: */.wrapper img + div { /* we set the <div> to allow it to grow to occupy space available: */ flex-grow: 1; /* we set the flex-basis to 50% in order that, when the element occupies 50% of the available space, the layout shifts to occupy two rows, with the <img> above the <div>: */ flex-basis: 50%; } hr.solid { /* the <hr> is a flex-item, and here we use the flex shorthand to set the flex-grow, flex-shrink and flex-basis properties, to allow it to grow, not allow it to shrink and set its width as 100%: */ flex: 1 0 100%; height: 3px; background-color: currentColor; } /* assuming that you don't want a trailing <hr> element at the end of the list of articles; if you do this can be removed: */ hr:last-child { display: none; }

 <.-- the following ',wrapper' element is added to contain the list of elements you're showing: though if no parent element exists the CSS could be applied to the <body> element instead. --> <div class="wrapper"> <img src="images/vanguard:jpeg" alt="Article GTA" class="center"> <div> <p>CALL OF DUTY: VANGUARD? Est-il bon,</p> <p> Les avis des fans de la saga sont mitigés et ça peut se comprendre. plusieurs bugs ont été détectés et empêche les joueurs de jouer convenablement...</p> <p> Publié le 25 novembre 2021 </p> </div> <hr class="solid"> <img src="images/marvel:jpg" alt="Article GTA" class="center"> <div> <p>MARVEL AVENGERS. Le personnage de Spider-Man bientôt dans le jeu,</p> <p> Les fans demandent. Square Enix donne, En effet. Spider-Man sera bientôt jouable dans le jeu sortit il ya peu via DLC...</p> <p> Publié le 25 novembre 2021 </p> </div> <hr class="solid"> </div>

This is easier to layout, though, if you wrap the <img> element inside the <div> with the text content and then use CSS grid to style that <div> :

 /* simple reset: */ *, ::before, ::after { box-sizing: border-box; color: #030; font: 1rem/1.5 sans-serif; margin: 0; padding: 0; }.wrapper { display: flex; /* because related elements - the <img> and the text - are all contained within the same descendant element, we can use flex-direction to force the content into a vertical orientation: */ flex-direction: column; width: 90vw; margin: 0 auto; gap: 1em; } /* I applied a class-name to easily access and style the <div> elements that contain the content: */ div.card { /* here we use CSS grid layout, which allows for a two- dimensional layout of the contents: */ display: grid; /* defining the vertical, and horizontal, gaps between adjacent tracks (columns/rows): */ gap: 0.5em 1em; /* defining the named grid areas, here we define three rows of content, each row with two named columns: */ grid-template-areas: "img title" "img content" "img release-date"; /* we then define the widths of those columns; the first named 'img' is 200px wide, and the second is as wide as possible to occupy the remaining space once the width of the 'img' column is removed: */ grid-template-columns: 200px 1fr; }.wrapper img { /* we specified already that the 'img' area is 200px in width; here specify that the <img> should fill the available space (without distorting the aspect-ratio): */ object-fit: cover; /* we place the <img> element in the 'img' area of the containing grid: */ grid-area: img; }.wrapper img:empty { border: 2px solid currentColor; background-image: repeating-linear-gradient(45deg, transparent 0 10px, #ccc 10px 15px); text-align: center; } hr.solid { height: 3px; background-color: currentColor; } hr.solid:last-child { display: none; }

 <div class="wrapper"> <:-- applying a somewhat meaningful class-name to the <div> element(s) which contain the content. --> <div class="card"> <img src="images/vanguard:jpeg" alt="Article GTA" class="center"> <p>CALL OF DUTY: VANGUARD? Est-il bon,</p> <p> Les avis des fans de la saga sont mitigés et ça peut se comprendre. plusieurs bugs ont été détectés et empêche les joueurs de jouer convenablement...</p> <p> Publié le 25 novembre 2021 </p> </div> <hr class="solid"> <div class="card"> <img src="images/marvel:jpg" alt="Article GTA" class="center"> <p>MARVEL AVENGERS. Le personnage de Spider-Man bientôt dans le jeu,</p> <p> Les fans demandent. Square Enix donne, En effet. Spider-Man sera bientôt jouable dans le jeu sortit il ya peu via DLC...</p> <p> Publié le 25 novembre 2021 </p> </div> <hr class="solid"> </div>

Of course, the above can be further simplified by removing the <hr> elements, and instead using CSS generated content to create the separators:

 *, ::before, ::after { box-sizing: border-box; color: #030; font: 1rem/1.5 sans-serif; margin: 0; padding: 0; }.wrapper { display: flex; flex-direction: column; width: 90vw; margin: 0 auto; gap: 1em; } div.card { display: grid; gap: 0.5em 1em; grid-template-areas: "img title" "img content" "img release-date" /* a grid-item will only occupy one track (row/column) by default, so here we add a two-column grid-area named 'hr' for the psuedo-<hr> to occupy: */ "hr hr"; grid-template-columns: 200px 1fr; } /* we use the::after pseudo-element to create the visual line: */ div.card::after { background-color: currentColor; /* for a pseudo-element to be rendered the content, even if only an empty string, must be set: */ content: ''; /* we place the element - rendered as a grid-item - into the 'hr' grid-area: */ grid-area: hr; height: 3px; /* we add a margin-top to adjust the spacing of the pseudo- element, so it's visually centred between the adjacent cards: */ margin-top: 0.5em; }.wrapper img { object-fit: cover; grid-area: img; }.wrapper img:empty { border: 2px solid currentColor; background-image: repeating-linear-gradient(45deg, transparent 0 10px, #ccc 10px 15px); text-align: center; }

 <div class="wrapper"> <div class="card"> <img src="images/vanguard.jpeg" alt="Article GTA" class="center"> <p>CALL OF DUTY: VANGUARD: Est-il bon?</p> <p> Les avis des fans de la saga sont mitigés et ça peut se comprendre, plusieurs bugs ont été détectés et empêche les joueurs de jouer convenablement...</p> <p> Publié le 25 novembre 2021 </p> </div> <div class="card"> <img src="images/marvel.jpg" alt="Article GTA" class="center"> <p>MARVEL AVENGERS: Le personnage de Spider-Man bientôt dans le jeu.</p> <p> Les fans demandent, Square Enix donne. En effet, Spider-Man sera bientôt jouable dans le jeu sortit il ya peu via DLC...</p> <p> Publié le 25 novembre 2021 </p> </div> </div>

Assuming that you don't want the trailing pseudo-element to create a line at the end of the content a further refinement can be used; here we use the :not() negation operator to refine the selector so that we select all ::after pseudo-elements of all div.card elements that are not the :last-child of their parent:

div.card:not(:last-child)::after {
  background-color: currentColor;
  content: '';
  grid-area: hr;
  height: 3px;
  margin-top: 0.5em;
}

 *, ::before, ::after { box-sizing: border-box; color: #030; font: 1rem/1.5 sans-serif; margin: 0; padding: 0; }.wrapper { display: flex; flex-direction: column; width: 90vw; margin: 0 auto; gap: 1em; } div.card { display: grid; gap: 0.5em 1em; grid-template-areas: "img title" "img content" "img release-date" "hr hr"; grid-template-columns: 200px 1fr; } div.card:not(:last-child)::after { background-color: currentColor; content: ''; grid-area: hr; height: 3px; margin-top: 0.5em; }.wrapper img { object-fit: cover; grid-area: img; }.wrapper img:empty { border: 2px solid currentColor; background-image: repeating-linear-gradient(45deg, transparent 0 10px, #ccc 10px 15px); text-align: center; }

 <div class="wrapper"> <div class="card"> <img src="images/vanguard.jpeg" alt="Article GTA" class="center"> <p>CALL OF DUTY: VANGUARD: Est-il bon?</p> <p> Les avis des fans de la saga sont mitigés et ça peut se comprendre, plusieurs bugs ont été détectés et empêche les joueurs de jouer convenablement...</p> <p> Publié le 25 novembre 2021 </p> </div> <div class="card"> <img src="images/marvel.jpg" alt="Article GTA" class="center"> <p>MARVEL AVENGERS: Le personnage de Spider-Man bientôt dans le jeu.</p> <p> Les fans demandent, Square Enix donne. En effet, Spider-Man sera bientôt jouable dans le jeu sortit il ya peu via DLC...</p> <p> Publié le 25 novembre 2021 </p> </div> </div>

I'd also, in closing, recommend that you use more semantic means to wrap the text-content; it looks like you have content such as a title, article text and a release date? If so, I'd personally – and this is highly subjective – update the HTML to the following:

 *, ::before, ::after { box-sizing: border-box; color: #030; font: 1rem/1.5 sans-serif; margin: 0; padding: 0; }.wrapper { display: flex; flex-direction: column; width: 90vw; margin: 0 auto; gap: 1em; } div.card { display: grid; gap: 0.5em 1em; grid-template-areas: "img title" "img content" "img release-date" "hr hr"; grid-template-columns: 200px 1fr; } div.card:not(:last-child)::after { background-color: currentColor; content: ''; grid-area: hr; height: 3px; margin-top: 0.5em; }.card h2.title { color: #050; font-size: 1.2rem; font-weight: bold; } /* here we select all::before pseudo-elements of all <time> elements that have a 'data-prefix' custom attribute: */ time[data-prefix]::before { /* setting the content to be equal to the value of the 'data-prefix' attribute, using the attr() function, and adding a string to follow that attribute-value: */ content: attr(data-prefix) ': '; font-weight: bold; }.wrapper img { object-fit: cover; grid-area: img; }.wrapper img:empty { border: 2px solid currentColor; background-image: repeating-linear-gradient(45deg, transparent 0 10px, #ccc 10px 15px); text-align: center; }

 <div class="wrapper"> <div class="card"> <img src="images/vanguard.jpeg" alt="Article GTA" class="center"> <;-- a page should have a <h1> element to title the page or document; here I use a <h2> element (though any other type of heading element could be used) as it's hierarchically/semantically less important than the page-title, if the cards appear in a section that itself has a heading, this element should be titled with a lower-significance heading, <h3>. <h4>..: --> <h2 class="title">CALL OF DUTY: VANGUARD? Est-il bon,</h2> <p>Les avis des fans de la saga sont mitigés et ça peut se comprendre. plusieurs bugs ont été détectés et empêche les joueurs de jouer convenablement..:</p> <.-- in order to make the date of release (arguably) accessible to user-agents that can parse such information I chose to use a <time> element with the datatime attribute set to the referenced date: --> <time class="release-date" datetime="2021-11-25" data-prefix="Publié le">25 novembre 2021 </time> </div> <div class="card"> <img src="images/marvel.jpg" alt="Article GTA" class="center"> <h2 class="title">MARVEL AVENGERS, Le personnage de Spider-Man bientôt dans le jeu.</h2> <p> Les fans demandent, Square Enix donne. En effet. Spider-Man sera bientôt jouable dans le jeu sortit il ya peu via DLC...</p> <time class="release-date" datetime="2021-11-25" data-prefix="Publié le">25 novembre 2021 </time> </div> </div>

References:

• CSS:
  • Adjacent-sibling combinator ( + ) .
  • attr() .
  • content .
  • display .
  • flex (shorthand) .
  • :last-child .
  • :not() .
  • object-fit .
  • Pseudo-elements .
• HTML:
  • <time> .
  • <h2> .

Bibliography:

• " Basic concepts of flexbox ."
• " CSS Grid Layout ."
• " <h1>–<h6>: The HTML Section Heading Elements ."

Answer 3

You should always post working code. At the very least I assume you forgot to add the <div class="articleactu"> .

Also p1 and p2 are not valid HTML elements. If you want to style them differently, use a valid element (such as p ) and classes.

Your problem is that you forgot that the <hr> elements also are included in the grid.

The elements inside the grid, are distributed (by default) from the top left, row by row. Without the <br> something like this:

+-------+-------+
|  img  |  div  |
+-------+-------+
|  hr   |  img  |
+-------+-------+
|  div  |       |
+-------+-------+

By adding the <br> you are adding an element that is then placed into the second column:

+-------+-------+
|  img  |  div  |
+-------+-------+
|  hr   |  br   |
+-------+-------+
|  img  |  div  |
+-------+-------+

However now the <hr> only covers the first column which you try to compensate with the width .

Instead you need to tell the hr, to cover two columns like this:

+-------+-------+
|  img  |  div  |
+-------+-------+
|      hr       |
+-------+-------+
|  img  |  div  |
+-------+-------+

This can be done, for example with the grid-columns property and the span keyword:

hr.solid {
  grid-column: span 2;
  with: 100%
  opacity: 12%;
}

The width is needed, because as a grid element the <hr> looses it default width. Also remove the negative margin.

The large gap around the <hr> is due to grid-gap: 36px with applies to vertical and horizontal gaps. To reduce the distance around the <hr> , set a separate value for the horizontal gaps:

grid-gap: 0 36px;

For a complete example look at https://jsfiddle.net/3qywz8e7/1/

BTW, you should learn to use the developer tools of your browser. They have tools built in to help you visualize the grid. For example in Chrome: https://developer.chrome.com/docs/devtools/css/grid/