How to place a div over a div which is centered?

Question

.right {
  float: right;
  border: 3px solid #73AD21;
}

<div>
  <div class="right">
    <p>testtesttest.</p>
  </div>
  <div style="text-align: center;">
    <h2>Middle</h2>
    <p>blablabla</p>
  </div>
</div>

I want that the Middle is centered and the other box is on the right. In my code the Middle is not centered. How can I do that?

what u want to u want place h2 to be aligned center and test to be float on right ? — Amaresh S M, Sep 22 '20 at 08:19
i want the inside of the centered div (h2, p, img... what ever) in the center and the test on the right end of the "big" div. In my code the Middle is not in the middle. — SkullKid, Sep 22 '20 at 08:22

score 1 · Accepted Answer · answered Sep 22 '20 at 08:24

I hope this is what you are expecting.

.text {
  text-align: center;
  background-color: red;
}

.container {
  position: relative;
}

.right {
  position: absolute;
  right: 0;
  width: fit-content;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  border: 3px solid #73AD21;
}

<div class="container">
  <div class="right">
    <p>testtesttest.</p>
  </div>
  <div class="text">
    <h2>Middle</h2>
    <p>blablabla</p>
  </div>
</div>

the same glitch as in my answer can occur here, if You make caption too long — Kovo, Sep 22 '20 at 08:45

score 1 · Answer 2 · answered Sep 22 '20 at 08:31

U mean to have it look something like this ? But this has BIG drawback, that if caption is too long it will overflow the div on the right.

.main {
  position: relative;
}

.right {
  //float: right;
  position: absolute;
  right: 0;
  border: 3px solid #73AD21;
}

<div class="main">
  <div class="right">
    <p>testtesttest.</p>
  </div>
  <div style="text-align: center;">
    <h2>Middle</h2>
    <p>blablabla</p>
  </div>
</div>

How to place a div over a div which is centered?

2 Answers2