0

My problem is that I want these 3 divs inline like shown in Image 1:

I have tried adding display: inline-block; to the divs. But result is always something like shown in Image 2.

.textdiv {
  font-family: Open sans;
  font-size: 18px;
  background-color: #EFEFEF;
  width: 384px;
  height: 380px;
  padding-top: 2.5%;
  padding-bottom: 0px;
  text-align: center;
  margin-top:5%;
  border: 1px solid black;
}
.h5title {
  font-weight:bold;
  margin-top: 5%;
  margin-bottom: 5%;
  font-weight:bold;
}
.buttondiv {
  width: 384px;
  height:70px;
  background-color: #d2d2d2;
  letter-spacing: 0px;
  color: #222222;
  text-transform: uppercase;
  opacity: 1;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}
<div class="textdiv">
<h5 class="h5title">Lorem ipsum dolor sit</h5>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.


</div>

 <div class="buttondiv"> 
   <a href="http://#">Read more</a>
       
                </div>

 <div class="textdiv">
<h5 class="h5title">Lorem ipsum dolor sit</h5>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.


</div>

 <div class="buttondiv"> 
   <a  href="http://#">Read more</a>
       
</div>

My Codepen for this: https://codepen.io/l_h/pen/oNYJZLa

Like you can see it's the buttondiv inside the textdiv thats causing the problems. How to force them to be inline like in the first image?

Image 1: Result I want

Image2: Result on what I have tried

kmoser
  • 8,780
  • 3
  • 24
  • 40
user14574843
  • 11
  • 3

5 Answers5

0

I think you want like this.

.text-container {
    display: flex;
    justify-content: space-around;
}
.textdiv {
    font-family: Open sans;
    font-size: 18px;
    background-color: #EFEFEF;
    width: 384px;
    height: 380px;
    padding-top: 2.5%;
    padding-bottom: 0px;
    text-align: center;
    margin-top: 5%;
    border: 1px solid black;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.h5title {
    font-weight:bold;
    margin-top: 5%;
    margin-bottom: 5%;
    font-weight:bold;
}
.buttondiv {
    width: 384px;
    height:70px;
    background-color: #d2d2d2;
    letter-spacing: 0px;
    color: #222222;
    text-transform: uppercase;
    opacity: 1;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}
<div class="text-container">
    <div class="textdiv">
        <h5 class="h5title">Lorem ipsum dolor sit</h5>
        
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
        <div class="buttondiv"> 
            <a href="http://#">Read more</a>
        </div>
    </div>
    <div class="textdiv">
        <h5 class="h5title">Lorem ipsum dolor sit</h5>
        
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
        <div class="buttondiv"> 
            <a  href="http://#">Read more</a>
        </div>
    </div>
    <div class="textdiv">
        <h5 class="h5title">Lorem ipsum dolor sit</h5>
        
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
        <div class="buttondiv"> 
            <a  href="http://#">Read more</a>
        </div>
    </div>
</div>
Sato Takeru
  • 1,669
  • 4
  • 12
  • 27
  • Yes, thank you this worked. I had tried something like this but I just didn't now how to apply the justify-content: space-around; in text-container and flex-direction: column; justify-content: space-between; in textdiv. – user14574843 Mar 11 '21 at 07:47
  • justify-content adjusts elements in it. space-around adjusts elements to have same margins, and space-between adjusts elements to the ends. You can understand it by trying yourself. – Sato Takeru Mar 11 '21 at 08:05
0

As a matter of fact, welding to wrapping elements in Grid structure does not give very good results.

In your example, you order "sm" devices and above to come side by side, but this is not possible for the width values you have defined, because they do not fit.

.textdiv {
  font-family: Open sans;
  font-size: 18px;
  background-color: #EFEFEF;
  width: 384px;
  height: 380px;
  padding-top: 2.5%;
  padding-bottom: 0px;
  text-align: center;
  margin-top:5%;
  border: 1px solid black;
}
.h5title {
  font-weight:bold;
  margin-top: 5%;
  margin-bottom: 5%;
  font-weight:bold;
}
.buttondiv {
  width: 384px;
  height:70px;
  background-color: #d2d2d2;
  letter-spacing: 0px;
  color: #222222;
  text-transform: uppercase;
  opacity: 1;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">


<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <div class="textdiv">
        <h5 class="h5title">Lorem ipsum dolor sit</h5>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      </div>
      <div class="buttondiv">
        <a href="http://#">Read more</a>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="textdiv">
        <h5 class="h5title">Lorem ipsum dolor sit</h5>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      </div>
      <div class="buttondiv">
        <a href="http://#">Read more</a>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="textdiv">
        <h5 class="h5title">Lorem ipsum dolor sit</h5>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      </div>
      <div class="buttondiv">
        <a href="http://#">Read more</a>
      </div>
    </div>
  </div>
</div>

So let's arrange the wrapper elements to cover the container it is in,

.textdiv {
  font-family: Open sans;
  font-size: 18px;
  background-color: #EFEFEF;
  padding-top: 2.5%;
  padding-bottom: 0px;
  text-align: center;
  margin-top:5%;
  border: 1px solid black;
}
.h5title {
  font-weight:bold;
  margin-top: 5%;
  margin-bottom: 5%;
  font-weight:bold;
}
.buttondiv {
  background-color: #d2d2d2;
  letter-spacing: 0px;
  color: #222222;
  text-transform: uppercase;
  opacity: 1;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">


<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <div class="textdiv">
        <h5 class="h5title">Lorem ipsum dolor sit</h5>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      </div>
      <div class="buttondiv">
        <a href="http://#">Read more</a>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="textdiv">
        <h5 class="h5title">Lorem ipsum dolor sit</h5>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      </div>
      <div class="buttondiv">
        <a href="http://#">Read more</a>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="textdiv">
        <h5 class="h5title">Lorem ipsum dolor sit</h5>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      </div>
      <div class="buttondiv">
        <a href="http://#">Read more</a>
      </div>
    </div>
  </div>
</div>

As you can see everything looks fine.

enter image description here Fullscreen screenshot of this test code snippet.

BOZ
  • 2,731
  • 11
  • 28
0

You can do this way.

.container {
  display: flex;
  flex-direction: row;
}

.item {
  display: flex;
  flex-direction: column;
  margin: 1rem;
}

.textdiv {
  font-family: Open sans;
  font-size: 18px;
  background-color: #EFEFEF;
  width: 384px;
  height: 380px;
  padding-top: 2.5%;
  padding-bottom: 0px;
  text-align: center;
  margin-top:5%;
  border: 1px solid black;
}
.h5title {
  font-weight:bold;
  margin-top: 5%;
  margin-bottom: 5%;
  font-weight:bold;
}
.buttondiv {
  width: 384px;
  height:70px;
  background-color: #d2d2d2;
  letter-spacing: 0px;
  color: #222222;
  text-transform: uppercase;
  opacity: 1;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}
<div class="container">
<div class="item">
<div class="textdiv">
  <h5 class="h5title">Lorem ipsum dolor sit</h5>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>

<div class="buttondiv"> 
   <a href="http://#">Read more</a>
</div>

</div>
<div class="item">
<div class="textdiv">
  <h5 class="h5title">Lorem ipsum dolor sit</h5>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>

<div class="buttondiv"> 
   <a href="http://#">Read more</a>
</div>

</div>
</div>
Yadab
  • 1,767
  • 1
  • 10
  • 16
0

Find the flex implementation of your requirement.

.textdiv {
  font-family: Open sans;
  font-size: 18px;
  background-color: #efefef;
  width: 384px;
  height: 380px;
  padding-top: 2.5%;
  padding-bottom: 0px;
  text-align: center;
  margin-top: 5%;
  border: 1px solid black;
}
.h5title {
  font-weight: bold;
  margin-top: 5%;
  margin-bottom: 5%;
  font-weight: bold;
}
.buttondiv {
  width: 384px;
  height: 70px;
  background-color: #d2d2d2;
  letter-spacing: 0px;
  color: #222222;
  text-transform: uppercase;
  opacity: 1;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}

.parent-container {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}
<div class="parent-container">
  <div class="container">
    <div class="textdiv">
      <h5 class="h5title">Lorem ipsum dolor sit</h5>

      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
      sed diam voluptua.
    </div>

    <div class="buttondiv">
      <a href="http://#">Read more</a>
    </div>
  </div>

  <div class="container">
    <div class="textdiv">
      <h5 class="h5title">Lorem ipsum dolor sit</h5>

      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
      sed diam voluptua.
    </div>

    <div class="buttondiv">
      <a href="http://#">Read more</a>
    </div>
  </div>
</div>
Nitheesh
  • 19,238
  • 3
  • 22
  • 49
0

Can you please check the below code? Hope it will work for you. We have wrapped your 3 blocks textdiv inside a wrapper class main-content & we have used flex utilities to achieve your requirement and also for this solution we don't need to add any CSS library.

Please refer to this link: https://jsfiddle.net/yudizsolutions/6hLby20w/

.main-content {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
}

.text-content {
  padding: 40px;
}

.textdiv {
  margin: 0px 15px;
  font-family: Open sans;
  font-size: 18px;
  background-color: #EFEFEF;
  width: 384px;
  text-align: center;
  margin-top: 5%;
}

.h5title {
  font-weight: bold;
  margin-top: 5%;
  margin-bottom: 5%;
  font-weight: bold;
}

.buttondiv {
  width: 100%;
  background-color: #d2d2d2;
  letter-spacing: 0px;
  color: #222222;
  text-transform: uppercase;
  opacity: 1;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}
<div class="main-content">
  <div class="textdiv">
    <div class="text-content">
      <h5 class="h5title">Lorem ipsum dolor sit</h5>
      <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    </div>
    <div class="buttondiv">
      <a href="http://#">Read more</a>
    </div>
  </div>

  <div class="textdiv">
    <div class="text-content">
      <h5 class="h5title">Lorem ipsum dolor sit</h5>
      <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    </div>
    <div class="buttondiv">
      <a href="http://#">Read more</a>
    </div>
  </div>

  <div class="textdiv">
    <div class="text-content">
      <h5 class="h5title">Lorem ipsum dolor sit</h5>
      <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    </div>
    <div class="buttondiv">
      <a href="http://#">Read more</a>
    </div>
  </div>
</div>
Yudiz Solutions
  • 4,216
  • 2
  • 7
  • 21