CODEWITHSUNDEEP
htmlcss
Nadj
Nadj

Reputation: 295

how to solve overflowing content

I just added a link tag after an input text type but when I view the site, the link goes on top of the input as you can see on the photo and don't see anything wrong. Perhaps there is a reset css that I dont know.

a.activate {
  background-color: pink;
  padding: 10px;
}
<div class="cont bonus">
  <h3>You have no active Bonus on your account</h3>
  <h4>Got a Bonus code?</h4>
  <input class="input" type="text" name="bonuscode" placeholder="Bonus Code">
  <br>
  <div id="activate">
    <a class="activate" href="#">Activate</a> 
  </div>
</div>

Upvotes: 1

Views: 46

Answers (2)

Sagar
Sagar

Reputation: 538

Just add display block to input. No need to change anything.

input{
   display:block;
}

Upvotes: 2

hungerstar
hungerstar

Reputation: 21725

That's because your link is an inline element. The padding you've added behaves differently for inline elements than block elements.

Set your link to display: inline-block;

a.activate {
  background-color: pink;
  padding: 10px;
  display: inline-block;
}
<div class="cont bonus">
  <h3>You have no active Bonus on your account</h3>
  <h4>Got a Bonus code?</h4>
  <input class="input" type="text" name="bonuscode" placeholder="Bonus Code">
  <br>
  <div id="activate">
    <a class="activate" href="#">Activate</a> 
  </div>
</div>

An inline element occupies only the space bounded by the tags that define the inline element.

- MDN Inline Elements.

Upvotes: 2

Related Questions