How to make a some part of text align right in html

Issue

I have my Header and I need to show a text as below,

Dashboard                                   User_1

Simply the Dashboard should be in left side while user_1 should be at the right side. My Header as follows,

<div class="header">Dashboard  <a href="updatedetails.php" style="text-align:right"><?php echo htmlspecialchars($_SESSION["username"]); ?></a></div>

But this provides both Dashboard User_1 at the same place. Can someone help me to seperate those two as I required?

update:

If I need to use another text at the right of username? what would be the change to do? Then Dashboard to be at left corner while username and the other text should be in right side.

Dashboard                                   User_1 Logout

Solution

I would recommend looking into flexbox. This is just a simple example to get you started, but this will be a lot more flexible as you scale up or down resolutions on different devices.

CSS Tricks provides a guide for flexbox too that would be worth a read for you.

You may not be able to use this exact code I have, but it should be a decent jumping-off point for you at least.

.flex {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
<div style="width: 98vw;">
  <div class="flex">
    <a>Dashboard</a>
    <a>username</a>
  </div>
</div>

Answered By – Matt Hatcher

Answer Checked By – Senaida (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.