CODEWITHSUNDEEP
htmlcssalignmenttext-alignmenttext-align
Jackson Pope
Jackson Pope

Reputation: 23

How can I align text to the right side of a div?

I am trying to basically move what is circled in green to the box that is colored purple.

See Image Here

.counter {
  margin-left: 20%;
  margin-right: 20%;
  width: 382px;
}

.counter-right {
  margin-left: 60%;
  text-align: right;
}
<div class="counter">
  <img class="counter.img" src="https://via.placeholder.com/100" alt="Counter">
  <div class="counter-right">
    <h1>Counter</h1>
  </div>
</div>

Upvotes: 1

Views: 1448

Answers (2)

Neom
Neom

Reputation: 107

if you are not comfortable with display: flex, here is another simple solution:

Use marginand padding for spacing as you desire.

 .counter {
    width: 100%;
  }

  .counter-left {
    float: left;
  }

  .counter-right {
    float: left;
    /* border: 1px solid red; */
    line-height: 10px;
    padding-left: 10px;
  }
<body>
  <div class="counter">
    <div class="counter-left">
      <img class="counter.img" src="https://via.placeholder.com/300" alt="Counter">
    </div>

    <div class="counter-right">
      <h1>Counter</h1>
    </div>
  </div>
</body>

Upvotes: 0

isherwood
isherwood

Reputation: 61063

Big margins aren't really a good way to lay things out. You should use inline-block display or flexbox.

.counter {
  margin-left: 20%;
  margin-right: 20%;
  display: flex; /* defaults to "row" (horizontal orientation) */
  background: #ddd;
}

.counter-left {
  flex: 1; /* stretch to use all available space */
}

.counter-right {
  flex: none; /* use only the space needed by contents */
  background: pink;
}
<div class="counter">
  <div class="counter-left">
    <img class="counter.img" src="https://via.placeholder.com/100" alt="Counter">
  </div>

  <div class="counter-right">
    <h1>Counter</h1>
  </div>
</div>

Upvotes: 1

Related Questions