CODEWITHSUNDEEP
htmlcss
user9259862
user9259862

Reputation:

How to display them on same line

I am trying to display h4 and the paragraph on the same line, but it's not working. I tried to float them to the left, but nothing changed

.offer {
  margin-left: 12%;
}

.offer h4 {
  background-color: #f25c25;
  display: table-cell;
  height: 120px;
  width: 120px;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  color: #fff;
  transform: rotate(7deg);
}
<div class="offer">
  <div class="row">
    <h4>Offer<br/> Expires<br/> Oct. 31,<br/> 2015!</h4>
  </div>
  <p class="paragraph">Know someone who’s fed up with soaring bank fees and declining customer service? Celebrate your credit union and its value. Each new member strengthens the credit union and lets us return earnings to you with better rates and higher dividends along
    with stellar services. Plus, when you refer a new member, you each get $20.*</p>
</div>
</div>

Upvotes: 1

Views: 60

Answers (3)

Johannes
Johannes

Reputation: 67748

Make both .row and .paragraph inline-blocks, apply width settings and vertical-align: middle to both:

.offer {
  margin-left: 8%;
}

.offer h4 {
  background-color: #f25c25;
  display: table-cell;
  height: 120px;
  width: 120px;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  color: #fff;
  transform: rotate(7deg);
}
.row {
  display: inline-block;
  vertical-align: middle;
  width: 200px;
}
.paragraph {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}
<div class="offer">
  <div class="row">
    <h4>Offer<br/> Expires<br/> Oct. 31,<br/> 2015!</h4>
  </div>
  <p class="paragraph">Know someone who’s fed up with soaring bank fees and declining customer service? Celebrate your credit union and its value. Each new member strengthens the credit union and lets us return earnings to you with better rates and higher dividends along
    with stellar services. Plus, when you refer a new member, you each get $20.*</p>
</div>

Upvotes: 1

TazTheManiac
TazTheManiac

Reputation: 402

In your case, you just needed to move the p tag into the same div, and set the p tag to display: table-cell.

.offer {
  margin-left: 12%;
}

.offer h4 {
  background-color: #f25c25;
  display: table-cell;
  height: 120px;
  width: 120px;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  color: #fff;
  transform: rotate(7deg);
}

.offer p {
  display: table-cell;
}
<div class="offer">
  <h4>Offer<br/> Expires<br/> Oct. 31,<br/> 2015!</h4>
  <p class="paragraph">Know someone who’s fed up with soaring bank fees and declining customer service? Celebrate your credit union and its value. Each new member strengthens the credit union and lets us return earnings to you with better rates and higher dividends along with stellar services. Plus, when you refer a new member, you each get $20.*</p>
</div>

Upvotes: 0

Kosh
Kosh

Reputation: 18393

Fix your HTML and use flex:

.offer {
display:flex;
  align-items:center;
  margin:0 5%;
}

.offer h4 {
  background-color: #f25c25;
  flex:0 0 auto;
  display: inline-flex;
  justify-content:center;
  align-items:center;
  height: 120px;
  width: 120px;
  text-align: center;
  border-radius: 50%;
  color: #fff;
  transform: rotate(7deg);
  margin-right:20px
}
<div class="offer">
  <h4>Offer<br/> Expires<br/> Oct. 31,<br/> 2015!</h4>
  <p class="paragraph">Know someone who’s fed up with soaring bank fees and declining customer service? Celebrate your credit union and its value. Each new member strengthens the credit union and lets us return earnings to you with better rates and higher dividends along
    with stellar services. Plus, when you refer a new member, you each get $20.*</p>
</div>

Upvotes: 1

Related Questions