'Position two text elements underneath eachother

I'm struggling to get these two text elements (h1 & p) underneath of each other. The header somehow seems to be blocking the paragraph from floating to the left side.

Img

.container .links h1 {
  font-size: 20px;
  float: right;
  display: block;
  overflow: hidden;
  margin: -30px 0 0 0;
}

.container .links p {
  font-size: 15px;
  margin-left: 30px;
  overflow: hidden;
  right: 100px;
  display: block;
  margin: 30px 0 0 0;
}
<div class="links">
  <div class="discord">
    <img class="icon-discord" src="https://via.placeholder.com/100.jpg">
    <h1>discord</h1>
    <p>abcd#1234</p>
  </div>
</div>
htmlcsscss-float


Solution 1:[1]

Going down the position route you can do it like this:

*{
  margin: 0;
  padding: 0;
}
.discord{
  position: relative;
  display: flex;
  gap: .5rem;
}

.discord > p{
  position: absolute;
  left: 70px;
  top: 40px;
}

.icon-discord{
  position: relative;
}
<div class="links">
  <div class="discord">
    <img class="icon-discord" style="height: 60px;" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.net-aware.org.uk%2Fsiteassets%2Fimages-and-icons%2Fapplication-icons%2Fapp-icons-discord.png%3Fw%3D585%26scale%3Ddown&f=1&nofb=1">
    <h1>discord</h1>
    <p>abcd#1234</p>
  </div>
</div>

A much easier way to do it is by wrapping the h1 and p and use flexbox to give some spacing using the gap property. See the snippet below:

* {
  margin: 0;
  padding: 0;
}

.discord {
  display: flex;
  gap: .5rem;
}
<div class="links">
  <div class="discord">
    <img class="icon-discord" style="height: 60px;" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.net-aware.org.uk%2Fsiteassets%2Fimages-and-icons%2Fapplication-icons%2Fapp-icons-discord.png%3Fw%3D585%26scale%3Ddown&f=1&nofb=1">
    <div class="discord-text">
      <h1>discord</h1>
      <p>abcd#1234</p>
    </div>
  </div>
</div>

Solution 2:[2]

Colleague Yong's solution is excellent but this can be done using float

You just need to add a dev and put the h1 and p elements inside them

<div class="links">
  <div class="discord">
    <img class="icon-discord" src="https://via.placeholder.com/100.jpg">
    <div class="texts">
      <h1>discord</h1>
      <p>abcd#1234</p>
    </div>
  </div>
</div>

The next step is to add float to the image

.container .links img
{
  float:left
}

Congratulations, the problem has been resolved. The code is final:

<div class="links">
  <div class="discord">
    <img class="icon-discord" src="https://via.placeholder.com/100.jpg">
    <div class="texts">
      <h1>discord</h1>
      <p>abcd#1234</p>
    </div>
  </div>
</div>

.links img
{
  float:left
}

.links h1 {
  font-size: 20px;
  overflow: hidden;
}

.links p {
  font-size: 15px;
}

Notes:

  • I deleted float and display block from the elements because they are useless and may cause you errors on the page
  • I also deleted margin top because it hides the element for me and I don't see it

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Yong
Solution 2 halfer

Related Questions