Question 197984 in Html Question posted in
Some basic documentation can be found here.

Html – How do I position this button element beside the text and header?

I’m having trouble placing this button beside the paragraph element. I don’t want it under it, rather I want it placed on the same line.

</div>

  <div class="up">

    <div class="ban">
      
      <div class="act">
        <h2>Join The Action</h2> 
        <p>Sign up for our product by clicking that button right over there!</p>
        <button>Join Up</button>
      </div>
      
    </div>

  </div>

I tried changing the flex direction to row, however that just leaves me with all three elements on the same line, and not the header on top of the paragraph element, with the button on the same line.

.up {
  display: flex;
  justify-content: center;
  height: 19vh;
  align-items: center;
}

.ban {
  width: 1150px;
  height: 250px;
  border-radius: 25px;
  background-color:  red;
  color: white;
}

.act {
  display: flex;
  flex-direction: column;
  align-items:flex-start;
  font-size: 25px;
  padding: 50px 50px;
}

.act p {
  padding: 10px 0;
}

.act button {
  display: inline-block;
  padding: 15px 30px;
  background-color: red;
  border: 2px solid white;
  color: white;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 10px;
  font-size: 18px;
  margin-top: 10px;

}
Tags:

3

Answers


  1. 0

    You can group <h2> and <p> in a single div like below

     <div class="group">
    <h2>Join The Action</h2> 
    <p>Sign up for our product by clicking that button right over there!</p>
  </div>

    Note: This <div> should still be inside your act div like below.

        <div class="act">
  <div class="text">
    <h2>Join The Action</h2> 
    <p>Sign up for our product by clicking that button right over there!</p>
  </div>
  <button>Join Up</button>
</div>

    Also adjust your css for .act to set your flex-drection to row and justify your content as space-between.

    .act {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 25px;
  padding: 50px 50px;
}

.group {
  display: flex;
  flex-direction: column;
}
    Login or Signup to reply.
  2. 0

    Put the p and button inside a div and apply flexbox to that container.

    (I realized that Shodipo Ayomide posted a similar answer as I was composing this one. However, you said you wanted the button next to the paragraph.)

    .up {
  /* display: flex; */
  /* justify-content: center; */
  /* height: 19vh; */
  /* align-items: center; */
}

.ban {
  /* width: 1150px; */
  /* height: 250px; */
  border-radius: 25px;
  background-color:  red;
  color: white;
}

.act {
  /* display: flex; */
  /* flex-direction: column; */
  /* align-items:flex-start; */
  font-size: 25px;
  padding: 50px 50px;
}

.act p {
  /* padding: 10px 0; */
  margin: 0;
}

.act button {
  flex-shrink: 0;
  /* display: inline-block; */
  padding: 15px 30px;
  background-color: red;
  border: 2px solid white;
  color: white;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 10px;
  font-size: 18px;
  /* margin-top: 10px; */
}


.join {
  display: flex;
  gap: 1em;
}
    <div class="up">

  <div class="ban">

    <div class="act">
      <h2>Join The Action</h2>
      <div class="join">
        <p>Sign up for our product by clicking that button right over there!</p>
        <button>Join Up</button>
      </div>
    </div>

  </div>

</div>
    Login or Signup to reply.
  3. 0

    You don’t need extra containers when using flex. You can instead set the heading to fill the row.

    .up {
  display: flex;
  justify-content: center;
  min-height: 19vh;
  align-items: center;
}

.ban {
  width: 1150px;
  min-height: 250px;
  border-radius: 25px;
  background-color:  red;
  color: white;
}

h2 {
  flex-basis: 100%;
  text-align: center;
}

.act {
  display: flex;
  flex-direction: row;
  align-items:flex-start;
  font-size: 25px;
  padding: 50px 50px;
  flex-wrap: wrap;
  justify-content: space-around;
}

.act p {
  padding: 10px 0;
}

.act button {
  padding: 15px 30px;
  background-color: red;
  border: 2px solid white;
  color: white;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 10px;
  font-size: 18px;
  margin-top: 10px;
}
    <div class="up">
  <div class="ban">
    <div class="act">
      <h2>Join The Action</h2> 
      <p>Sign up for our product by clicking that button right over there!</p>
      <button>Join Up</button>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search