CODEWITHSUNDEEP
htmlcss
cat1244
cat1244

Reputation: 69

Positioning of two elements

There are two blocks in which there is a text of variable length It is necessary that one block is on the right side, and the second block is attached to it. and if the second block has a large text, then it was moved to the line below.

<div style="text-align:right;">
    <span>
      You are logged on as a user <span>{username}</span>

         {sometext}
          | <a href="#">Change password</a>
          | <a href="#">Exit</a>
    </span>
</div>

I tried to do so.

<div style="position:relative;">
    <span>
      <div style="position:absolute; right: 250px;">
        You are logged on as a user <span>{username}</span>
      </div>
      <div style="position:absolute; top:0; right:0;">
        {someText}
          | <a href="#">Change password</a>
          | <a href="#">Exit</a>
      </div>
    </span>
</div>

But nothing happened, the block with the user's name rides on the right block How to make so that blocks did not run into each other and the text was transferred to a new line if it does not enter?

Upvotes: 1

Views: 59

Answers (2)

Michal D
Michal D

Reputation: 425

Your goal is easy to achieve with flexbox. The items will stay aligned to the right and if they cannot fit in one line some of them will be moved to the next line.

.wrapper {
  display: flex;
  justify-content: flex-end;
  flex-flow: row wrap;
}
<div class="wrapper">
  <div class="item">
    You are logged on as a user <span>{username}</span>
  </div>
  <div class="item">
  {someText}
  | <a href="#">Change password</a>
  | <a href="#">Exit</a>
  </div>
</div>

Upvotes: 4

DrCord
DrCord

Reputation: 3955

This should work for you:

<div style="position:relative; float: right;">
  <div style="position:relative; right: 0;">
    You are logged on as a user <span>{username}</span>
  </div>
  <div style="position:relative; top:0; right:0;">
    {someText}
      | <a href="#">Change password</a>
      | <a href="#">Exit</a>
  </div>

The float gets it over to the right and the positioning gets things onto the next line like you need.

Upvotes: 0

Related Questions