how to make inner div alignment fixed-CodePudding

I tried to align div with content towards right irrespective of resolution, now as observed when the inner text content increases the position of the whole div is dynamic not fixed.

Html:

<div style="position: relative">
  <img src="" style="min-height: 100px;" width="100%">
  <div style='position: absolute; top: 10%; right: 10%;'>
    <h1>text1</h1>
    <div>text2</div>
    <a>link text</a>
  </div>
</div>

 <div style="position: relative">
  <img src="" style="min-height: 100px;" width="100%">
  <div style='position: absolute; top: 10%; right: 10%;'>
    <h1>text1 2 3 4 5 6 </h1>
    <div>text2 3 4 5 6</div>
    <a>link text</a>
  </div>
</div>

we can make the position fixed irrespective of content

CodePudding user response：

You could set the text-align property to end, which will align the contents of the div to its end (right edge in this case) regardless of the length of any of the 3 text elements inside it.

<div style="position: relative">
  <img src="" style="min-height: 100px;" width="100%">
  <div style='position: absolute; top: 10%; right: 10%; text-align:end'>
    <h1>text1</h1>
    <div>this is demo text to show alignment towards the end</div>
    <a>link text</a>
  </div>
</div>

CodePudding user response：

<!-- Wrapper -->
<div style="position: relative;">

  <div style="position: absolute; width: 100px; top: 10%; right: 10%;">
    <div>
      <img src="" style="min-height: 100px;" width="100%">
      <div>
        <h1>text1</h1>
        <div>text2</div>
        <a>link text</a>
      </div>
    </div>

    <div>
      <img src="" style="min-height: 100px;" width="100%">
      <div>
        <h1>text1 2 3 4 5 6 </h1>
        <div>text2 3 4 5 6</div>
        <a>link text</a>
      </div>
    </div>

    <div>
      <img src="" style="min-height: 100px;" width="100%">
      <div>
        <h1>text1 2 3 4 5 6 </h1>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        <a>link text</a>
      </div>
    </div>
  </div>

</div>