How to make this image move to the right?-CodePudding

So, I was doing this Frontend Mentor challenge (at https://www.frontendmentor.io/challenges/notifications-page-DqK5QAmKbC) while I had run into this problem - I couldn't align the "Chess" image in the "Kimberly Smith" notification to the right.

Here is all the code I have written related to the notification: The HTML:

<div >
  <div >
    <img src="assets\images\avatar-kimberly-smith.webp"  />
    <div >
      <div >
        <div><strong>Kimberly Smith</strong> commented on your picture
          <br /><time>1 week ago</time>
        </div>
        <div ><img src="assets/images/image-chess.webp" alt="Chess" ></div>
      </div>
    </div>
  </div>
</div>

The CSS:

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}
.notification {
  background-color: #f6fafd;
  display: flex;
  align-items: center;
}
.notification__container {
  display: flex;
  align-items: center;
}
.image {
  display: flex;
  align-items: center;
  width: 50px;
  margin-right: 5px;
}
.notification_image--main-message-content {
  display: flex;
}
.align-right {
  display: flex;
}

Here is the Output
Here is the Expected Output

Here are the solutions I have tried:

display: block;
margin-left: auto;

float: right;

text-align: right;

display: flex;
justify-content: right;

Here is the live website: https://prismatic-capybara-4ba8da.netlify.app/
Here is the GitHub Repository for deeper reference: https://github.com/vishalscodes/frontendmentor-notifications-page

Thank You.

CodePudding user response：

It's possible to massively simplify your markup as follows:

Class notification. This is a flex box so items will try to fit side by side on one line. As the user's image, the main text and the 'chess' image are all on one line we don't need to add any more divs to this. We can just insert them directly, especially as you've made all img elements as blocks (this is always a good move imho).
Class notification-formatting is used to isolate the text so that the text and time stack on top of each other. As this is a flex item, this will try to shrink to fit the content.
We don't need a wrapper around the image with the chess class as that's already a block level element so to get that to move to the right I've added an align-right class. That simply has an inline-margin of auto 0. This is a fairly standard way of moving elements to the right of the page.

Some good resources here:

Complete guide to flexbox on css tricks
Margin on css tricks
Useful css reset by Kevin Powell (e.g. setting img to block)

Any questions just drop me a comment and I'll try help out.

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}
.notification {
  background-color: #f6fafd;
  display: flex;
  gap: 5px; /* I've removed the margin-right from your image and set the gap on the parent element so your 'chess' image moves all the way to the right */
}

.image {
  width: 50px;
  border-radius: 5px;
}

.align-right {
  margin-inline: auto 0; /* if we set the right margin to 0 then setting the left margin to 'auto' causes it to expand to fit the available width */
}

.round {
  border-radius: 100vw; /* make the radius massive so it defaults to a circle */
}

<div >
  <img src="https://picsum.photos/id/64/50/50"  />
  <div >
    <strong>Kimberly Smith</strong> commented on your picture
    <br /><time>1 week ago</time>
  </div>
  <img src="https://picsum.photos/id/237/50/50" alt="Chess" >
</div>

CodePudding user response：

Base on your code you can set to .align-right {justify-content: space-between; width: 100%; display: flex;}

and set 100% width to all parents divs you can see code bellow

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

.notification {
  width: 100%;
  background-color: #f6fafd;
  display: flex;
  align-items: center;
}

.notification-formatting {
  width: 100%;
}

.notification__container {
  display: flex;
  align-items: center;
  width: 100%;
}

.image {
  display: flex;
  align-items: center;
  width: 50px;
  margin-right: 5px;
}

.notification_image--main-message-content {
  display: flex;
}

.align-right {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

<div >
  <div >
    <img src="assets\images\avatar-kimberly-smith.webp"  />
    <div >
      <div >
        <div><strong>Kimberly Smith</strong> commented on your picture
          <br /><time>1 week ago</time></div>
        <div ><img src="assets/images/image-chess.webp" alt="Chess" ></div>
      </div>
    </div>

  </div>
</div>