Html - Keep each item together in the div and lined up correctly

ShinpiTekita
January 12, 2025
42 views
0 votes
2 Answers

in the div I have this stat/username box that is supposed to be close with the image but the image is supposed to be a little away to give it a nice effect, well the problem is I used position relative and I think that’s messing it up, I don’t know what other way to fix it and keep it responsive.

.top-container {
  display: flex;
  justify-content: space-around;
  padding: 15px;
}

.u1 {
  display: flex;
  align-items: center;
  position: relative;
  margin: 50px;
}

.u2 {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  position: relative;
  top: 70px;
  right: 50px;
  z-index: 1;

}

.u3 {
  background: rgba(90, 211, 238, 0.166);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 20px 50px;
  justify-content: center;

}

.u4 {
  background: rgba(90, 211, 238, 0.166);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 20px 50px;
  display: flex;
  justify-content: right;

}

.u5 {
  width: 100px;
  height: 100px;
  position: relative;
  top: 70px;
  right: 50px;
  z-index: 1;

}

<div class="top-container">
  <div class="u1">
    <img src="https://cdn.discordapp.com/avatars/870413726711435297/81a888d3981c992aee63d3c99531285e.webp?size=1024" class="u2" />
    <div class="u3">yumbo1z</div>
  </div>

  <div class="u1">
    <img src="https://cdn.discordapp.com/attachments/1134291282873810975/1327335746646052904/IMG_2820.png?ex=6782b13e&is=67815fbe&hm=7f48431c52523089dff49abed5ccb94955c049f770c4568aab9ee89d7964792c&" class="u5" />
    <div class="u4">9,100</div>
  </div>

  <div class="u1">
    <img src="https://cdn.discordapp.com/attachments/1134291282873810975/1327335746163441805/IMG_2821.png?ex=6782b13e&is=67815fbe&hm=f2ed76276b89fdde6bcc076191309e29d0437caf6d0f624cc7e909bca075c8e4&" class="u5" />
    <div class="u4">9,100</div>
  </div>

  <div class="u1">
    <img src="https://cdn.discordapp.com/attachments/1134291282873810975/1327335746163441805/IMG_2821.png?ex=6782b13e&is=67815fbe&hm=f2ed76276b89fdde6bcc076191309e29d0437caf6d0f624cc7e909bca075c8e4&" class="u5" />
    <div class="u4">9,100</div>
  </div>
</div>

Tags: css html

Answers

I think this is the nearest what you’re looking for.

I would recommend to use flex or grid for the positioning of the elements.

Hope, this helps.

.top-container {
  display: flex;
  justify-content: space-around;
  padding: 15px;
  position: relative;
  height: 100px;
}

.ele-1,
.ele-2,
.ele-3,
.ele-4 {
  position: absolute;
  
  left: 0;
  bottom: 0;
  margin: 50px auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 210px;
  border: 1px solid #FEE;
}

.ele-2 {
  left: 220px;
}

.ele-3 {
  left: 440px;
}

.ele-4 {
  left: 660px;
}


.ele-1 .img-container,
.ele-2 .img-container,
.ele-3 .img-container,
.ele-4 .img-container {
  display: flex;
  flex-direction: row;
  object-fit: contain;
  border-radius: 50%;
}

.ele-1 .img-container img,
.ele-2 .img-container img,
.ele-3 .img-container img,
.ele-4 .img-container img {
  margin: auto;
  border: 1px solid #F0F;
  height: 70px;
  aspect-ratio: 1;
  border-radius: 50%;
}

.ele-1 .u3,
.ele-2 .u3,
.ele-3 .u3,
.ele-4 .u3 {
  background: rgba(90, 211, 238, 0.166);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 20px;
}

<div class="top-container">
  <div class="u1 ele-1">
    <div class="img-container">
      <img src="https://cdn.discordapp.com/avatars/870413726711435297/81a888d3981c992aee63d3c99531285e.webp?size=1024" class="u2" />
    </div>
    <div class="u3">yumbo1z asdf</div>
  </div>

  <div class="u1 ele-2">
    <div class="img-container">
      <img src="https://cdn.discordapp.com/attachments/1134291282873810975/1327335746646052904/IMG_2820.png?ex=6782b13e&is=67815fbe&hm=7f48431c52523089dff49abed5ccb94955c049f770c4568aab9ee89d7964792c&" class="u5" />
    </div>
    <div class="u3">9,100</div>
  </div>

  <div class="u1 ele-3">
    <div class="img-container">
      <img src="https://cdn.discordapp.com/attachments/1134291282873810975/1327335746163441805/IMG_2821.png?ex=6782b13e&is=67815fbe&hm=f2ed76276b89fdde6bcc076191309e29d0437caf6d0f624cc7e909bca075c8e4&" class="u5" />
    </div>
    <div class="u3">9,100</div>
  </div>

  <div class="u1 ele-4">
    <div class="img-container">
      <img src="https://cdn.discordapp.com/attachments/1134291282873810975/1327335746163441805/IMG_2821.png?ex=6782b13e&is=67815fbe&hm=f2ed76276b89fdde6bcc076191309e29d0437caf6d0f624cc7e909bca075c8e4&" class="u5" />
    </div>
    <div class="u3">9,100</div>
  </div>
</div>

The following are the most relevant points:

All <div>s were changed to semantic elements meant for specific a purpose.
- <main> contains all of the content that’s not in the <header>s or <footer>.
- <figure> contains content like charts or images.
- <figcaption> should only reside within a <figure> it’s purpose is to contain the text that describes or is a title of the content within a <figure>.
The 4 <figure>s are centered vertically and spaced horizontally by a grid layout from <main>‘s properties:
```
display: grid;
grid-template-columns: repeat(4, 1fr);
```
Each <figure> has an <img> and a <figcaption> and they are centered vertically by each <figure>‘s properties:
```
display: flex;
align-items: center;
```
The :root‘s font-size is the default for any rem lengths. The font-size is in dvmax units which dynamically change in relation to either viewport width or height (whichever is currently the largest). So as the window changes so does everything that’s in rems.

View in Full page mode and resize the window.

@import url('https://fonts.googleapis.com/css2?family=Modak&display=swap');

:root {
  font: 3dvmax/1.5 Modak;
  overflow-y: hidden;
}

main {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: max-content;
  height: 100dvh;
  translate: 0 -10dvh;
}

figure {
  display: flex;
  align-items: center;
}

img {
  display: inline-block;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  box-shadow: 
    rgba(0, 0, 0, 0.25) 0px 54px 55px,
    rgba(0, 0, 0, 0.12) 0px -12px 30px,
    rgba(0, 0, 0, 0.12) 0px 4px 6px,  
    rgba(0, 0, 0, 0.17) 0px 12px 13px,
    rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

figcaption {
  font-size: 2rem;
  color: navy;
}

figure:first-child figcaption {
  margin-left: 0.5rem;
}

figure:not(:first-child) figcaption {
  translate: 0 0.5rem;
}

<main>

  <figure>
    <img src="https://cdn.discordapp.com/avatars/870413726711435297/81a888d3981c992aee63d3c99531285e.webp">
    <figcaption>yumbo1z</figcaption>
  </figure>

  <figure>
    <img src="https://i.ibb.co/D7PnMW0/coin.png">
    <figcaption>9100</figcaption>
  </figure>

  <figure>
    <img src="https://i.ibb.co/D7PnMW0/coin.png">
    <figcaption>9100</figcaption>
  </figure>

  <figure>
    <img src="https://i.ibb.co/D7PnMW0/coin.png">
    <figcaption>9100</figcaption>
  </figure>

</main>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Keep each item together in the div and lined up correctly

Answers