Question 35661 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

how to make inner div alignment fixed – Jquery

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.

expectation is content should be fixed and any additional text should should wrap in same div with no changes in div position towards left

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>
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0 
    <!-- 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search