How can I make containers have the same size?

Question

I have this site: https://acanhs.org/nhs-articles.html For some reason the containers all have different sizes. How can I make them all the same to make my website more visually appealing.

This is my html:

img.article {
  float: left;
  width: 300px;
  height: 300px;
  object-fit: cover;
}

a:link {
  color: Black;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: Black;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: Black;
  background-color: transparent;
  text-decoration: none;
}

a:active {
  color: Black;
  background-color: transparent;
  text-decoration: none;
}

</style><title>Stand Blog Posts</title><link href="bootstrap.min.css" rel="stylesheet"><style>.btn {
  width: 150px;
  height: 150px;
  background: #ddd;
  position: relative;
  text-align: center;
  margin: 15px;
  overflow: hidden;
  border-radius: 100%;
  display: inline-block;
}

.btn.download {
  background: #00CCFF;
}

.btn.download .cloud {
  box-shadow: 0px 0px #00a3cc, 1px 1px #00a3cc, 2px 2px #00a3cc, 3px 3px #00a3cc, 4px 4px #00a3cc, 5px 5px #00a3cc, 6px 6px #00a3cc, 7px 7px #00a3cc, 8px 8px #00a3cc, 9px 9px #00a3cc, 10px 10px #00a3cc, 11px 11px #00a3cc, 12px 12px #00a3cc, 13px 13px #00a3cc, 14px 14px #00a3cc, 15px 15px #00a3cc, 16px 16px #00a3cc, 17px 17px #00a3cc, 18px 18px #00a3cc, 19px 19px #00a3cc, 20px 20px #00a3cc, 21px 21px #00a3cc, 22px 22px #00a3cc, 23px 23px #00a3cc, 24px 24px #00a3cc, 25px 25px #00a3cc, 26px 26px #00a3cc, 27px 27px #00a3cc, 28px 28px #00a3cc, 29px 29px #00a3cc, 30px 30px #00a3cc, 31px 31px #00a3cc, 32px 32px #00a3cc, 33px 33px #00a3cc, 34px 34px #00a3cc, 35px 35px #00a3cc, 36px 36px #00a3cc, 37px 37px #00a3cc, 38px 38px #00a3cc, 39px 39px #00a3cc, 40px 40px #00a3cc, 41px 41px #00a3cc, 42px 42px #00a3cc, 43px 43px #00a3cc, 44px 44px #00a3cc, 45px 45px #00a3cc, 46px 46px #00a3cc, 47px 47px #00a3cc, 48px 48px #00a3cc, 49px 49px #00a3cc, 50px 50px #00a3cc;
}

.btn.download .arrow {
  -webkit-animation: download 1s linear infinite;
  animation: download 1s linear infinite;
}

.btn.upload {
  background: #F49845;
}

.btn.upload .cloud {
  box-shadow: 0px 0px #f17d15, 1px 1px #f17d15, 2px 2px #f17d15, 3px 3px #f17d15, 4px 4px #f17d15, 5px 5px #f17d15, 6px 6px #f17d15, 7px 7px #f17d15, 8px 8px #f17d15, 9px 9px #f17d15, 10px 10px #f17d15, 11px 11px #f17d15, 12px 12px #f17d15, 13px 13px #f17d15, 14px 14px #f17d15, 15px 15px #f17d15, 16px 16px #f17d15, 17px 17px #f17d15, 18px 18px #f17d15, 19px 19px #f17d15, 20px 20px #f17d15, 21px 21px #f17d15, 22px 22px #f17d15, 23px 23px #f17d15, 24px 24px #f17d15, 25px 25px #f17d15, 26px 26px #f17d15, 27px 27px #f17d15, 28px 28px #f17d15, 29px 29px #f17d15, 30px 30px #f17d15, 31px 31px #f17d15, 32px 32px #f17d15, 33px 33px #f17d15, 34px 34px #f17d15, 35px 35px #f17d15, 36px 36px #f17d15, 37px 37px #f17d15, 38px 38px #f17d15, 39px 39px #f17d15, 40px 40px #f17d15, 41px 41px #f17d15, 42px 42px #f17d15, 43px 43px #f17d15, 44px 44px #f17d15, 45px 45px #f17d15, 46px 46px #f17d15, 47px 47px #f17d15, 48px 48px #f17d15, 49px 49px #f17d15, 50px 50px #f17d15;
}

.btn.upload .arrow {
  -webkit-animation: uplaod 1s linear infinite;
  animation: uplaod 1s linear infinite;
}

.btn.upload .arrow:after {
  top: auto;
  bottom: 100%;
  border-color: transparent transparent #97CA03 transparent;
}

.cloud {
  width: 100px;
  height: 40px;
  position: relative;
  background: #fff;
  display: inline-block;
  border-radius: 50px;
  margin: 60px auto 0;
  box-shadow: 0px 0px #00a3cc, 1px 1px #00a3cc, 2px 2px #00a3cc, 3px 3px #00a3cc, 4px 4px #00a3cc, 5px 5px #00a3cc, 6px 6px #00a3cc, 7px 7px #00a3cc, 8px 8px #00a3cc, 9px 9px #00a3cc, 10px 10px #00a3cc, 11px 11px #00a3cc, 12px 12px #00a3cc, 13px 13px #00a3cc, 14px 14px #00a3cc, 15px 15px #00a3cc, 16px 16px #00a3cc, 17px 17px #00a3cc, 18px 18px #00a3cc, 19px 19px #00a3cc, 20px 20px #00a3cc, 21px 21px #00a3cc, 22px 22px #00a3cc, 23px 23px #00a3cc, 24px 24px #00a3cc, 25px 25px #00a3cc, 26px 26px #00a3cc, 27px 27px #00a3cc, 28px 28px #00a3cc, 29px 29px #00a3cc, 30px 30px #00a3cc, 31px 31px #00a3cc, 32px 32px #00a3cc, 33px 33px #00a3cc, 34px 34px #00a3cc, 35px 35px #00a3cc, 36px 36px #00a3cc, 37px 37px #00a3cc, 38px 38px #00a3cc, 39px 39px #00a3cc, 40px 40px #00a3cc, 41px 41px #00a3cc, 42px 42px #00a3cc, 43px 43px #00a3cc, 44px 44px #00a3cc, 45px 45px #00a3cc, 46px 46px #00a3cc, 47px 47px #00a3cc, 48px 48px #00a3cc, 49px 49px #00a3cc, 50px 50px #00a3cc;
}

.cloud:after,
.cloud:before {
  content: '';
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 100%;
  top: -20px;
  background: #fff;
  left: 5px;
}

.cloud:before {
  width: 40px;
  height: 40px;
  left: 50px;
}

.arrow {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 5;
  top: 10px;
  width: 15px;
  height: 10px;
  background: #97CA03;
  display: inline-block;
}

.arrow:after {
  content: '';
  position: absolute;
  left: -8px;
  top: 100%;
  border: 15px solid transparent;
  border-top-color: #97CA03;
}

@-webkit-keyframes download {
  0% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
    opacity: 0;
  }
}

@keyframes download {
  0% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
    opacity: 0;
  }
}

@-webkit-keyframes uplaod {
  0% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
    opacity: 0;
  }
}

@keyframes uplaod {
  0% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
    opacity: 0;
  }
}

<link rel="stylesheet" href="assets/css/templatemo-stand-blog.css">

<img src="logo.png" width="100" height="100" alt="HTML tag">
<p class="bluebackground">&emsp;</p>
<nav>
  <ul class="nav">
    <li class="navlist"><a class="active" href="index.html">Home</a></li>
    <li class="navlist"><a class="active" href="boyshome.html">Boys Campus</a></li>
    <li class="navlist"><a class="active" href="girlshome.html">Girls Campus</a></li>
    <li class="navlist"><a class="active" href="calculator.html">GPA Calculator</a></li>
  </ul>
</nav>
<p class="bluebackground">&emsp;</p>
<br>
<h1 class="girls-message centermess">
  <center>NHS BOYS</center>
</h1>
<nav>
  <p class="bluebackground">&emsp;</p>
  <ul class="nav">
    <li class="navlist"><a class="active" href="boyshome.html">Home</a></li>
    <li class="navlist"><a class="active" href="nhs-articles.html">NHS Articles</a></li>
    <li class="navlist"><a class="active" href="meet-our-officers-boys.html">Meet Our Officers</a></li>
    <li class="navlist"><a class="active" href="boyscontact.html">Contact Us</a></li>
  </ul>
</nav>
<p class="bluebackground">&emsp;</p>
<br>



<center>
  <section class="blog-posts grid-system">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <div class="all-blog-posts">
            <center>
              <div class="row">
                <div class="col-lg-4">
                  <div class="blog-post">
                    <div class="blog-thumb">
                      <img src="articlepics/Fitness.jpg" alt="" class="article">
                    </div>
                    <div class="down-content">
                      <h4>Fitness</h4>
                      <ul class="post-info">
                        <li>Mohammad Al-Wazzan</li>
                        <li>3/11/2020</li>
                      </ul>
                      <div class="btn download" onclick="window.location='articlepdfs/Fitness.pdf';">
                        <div class="cloud">
                          <div class="arrow"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4">
                  <div class="blog-post">
                    <div class="blog-thumb">
                      <img src="articlepics/الأمير.jpg" alt="" class="article">
                    </div>
                    <div class="down-content">
                      <h4>الأمير الراحل … أمير الإنسانية</h4>
                      <ul class="post-info">
                        <li>Mohammad Al-Obaidi</li>
                        <li>3/10/2020</li>
                      </ul>
                      <div class="btn download" onclick="window.location='articlepdfs/الأمير الراحل … أمير الإنسانية.pdf';">
                        <div class="cloud">
                          <div class="arrow"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4">
                  <div class="blog-post">
                    <div class="blog-thumb">
                      <img src="articlepics/Uyghur.jpg" alt="" class="article">
                    </div>
                    <div class="down-content">
                      <h4>Uyghur Muslims</h4>
                      <ul class="post-info">
                        <li>Khalid Kooheji</li>
                        <li>27/9/2020</li>
                      </ul>
                      <div class="btn download" onclick="window.location='articlepdfs/Uyghur Muslims.pdf';">
                        <div class="cloud">
                          <div class="arrow"></div>
                        </div>
                      </div>
                      <div class="post-options">
                        <div class="row">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4">
                  <div class="blog-post">
                    <div class="blog-thumb">
                      <img src="articlepics/Corona.jpg" alt="" class="article">
                    </div>
                    <div class="down-content">
                      <h4>Corona Virus: A New World</h4>
                      <ul class="post-info">
                        <li>Majed Al-Shaheen</li>
                        <li>27/9/2020</li>
                      </ul>
                      <div class="btn download" onclick="window.location='articlepdfs/Corona Virus A New World.pdf';">
                        <div class="cloud">
                          <div class="arrow"></div>
                        </div>
                      </div>
                      <div class="post-options">
                        <div class="row">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4">
                  <div class="blog-post">
                    <div class="blog-thumb">
                      <img src="articlepics/اقرأ.jpg" alt="" class="article">
                    </div>
                    <div class="down-content">
                      <h4>التعلم عبادة</h4>
                      <ul class="post-info">
                        <li>Omar Sheir</li>
                        <li>23/9/2020</li>
                      </ul>
                      <div class="btn download" onclick="window.location='articlepdfs/التعلم عبادة.pdf';">
                        <div class="cloud">
                          <div class="arrow"></div>
                        </div>
                      </div>
                      <div class="post-options">
                        <div class="row">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4">
                  <div class="blog-post">
                    <div class="blog-thumb">
                      <img src="articlepics/الصدقة.jpg" alt="" class="article">
                    </div>
                    <div class="down-content">
                      <h4>الصدقة</h4>
                      <ul class="post-info">
                        <li>Ahmad Al-Mazrouei</li>
                        <li>20/9/2020</li>
                      </ul>
                      <div class="btn download" onclick="window.location='articlepdfs/الصدقة.pdf';">
                        <div class="cloud">
                          <div class="arrow"></div>
                        </div>
                      </div>
                      <div class="post-options">
                        <div class="row">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </center>
          </div>
        </div>
      </div>
    </div>
  </section>
</center>

I have removed unnecessary items such as the header and the footer. But you should be able to see everything with the code

Here is: https://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height — doubleui, Oct 13 '20 at 08:03
first i recommend you add the margin-bottom to the blog-post container (.col-lg-4) not the blog post itself. then add height:100% to .blog-post and .down-content — estellechvl, Oct 13 '20 at 08:05

score 1 · Answer 1 · edited Oct 13 '20 at 08:34

Here some thing you wanna look at if you are using flex. It may be a little long but It will show you the concept of how flex box is powerful. Maybe you can replace your code with this

HTML

<ul class="list">
  <li class="list-item">
    <div class="list-content">
      <h2>Title</h2>
      <img src="http://baconmockup.com/250/200" alt="" />
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet.</p>
      <a href="">Link</a>
    </div>
  </li>
    
     <li class="list-item">
    <div class="list-content">
      <h2>Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis id ea dolorum expedita fugit incidunt commodi.</p>
      <a href="">Link</a>
    </div>
  </li>
  
  <li class="list-item">
    <div class="list-content">
      <h2>Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium.</p>
      <a href="">Link</a>
    </div>
  </li>
  
  <li class="list-item">
    <div class="list-content">
      <h2>Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur optio ipsa fuga vel repudiandae impedit illum delectus nihil error animi nobis quaerat quidem, amet, praesentium aspernatur inventore numquam! Totam, dolorem inventore reprehenderit, culpa obcaecati!</p>
      <a href="">Link</a>
    </div>
  </li>
  
  <li class="list-item">
    <div class="list-content">
      <h2>Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo veniam tempore vero velit deleniti corporis recusandae placeat eum repellendus modi architecto, iste, numquam nulla, praesentium fuga soluta eos consequatur sequi expedita! Ea aspernatur explicabo optio ducimus officia blanditiis voluptas possimus veniam maxime!</p>
      <a href="">Link</a>
    </div>
  </li>

  
    <li class="list-item">
    <div class="list-content">
      <h2>Title</h2>
      <img src="http://baconmockup.com/250/200" alt="" />
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum molestiae esse dolore corporis velit fugiat ipsam tempore optio dicta. Magnam iusto facere, maxime! Praesentium quo laborum, deserunt adipisci. Ipsam officia delectus repudiandae, aperiam magnam blanditiis fuga similique.</p>
      <a href="">Link</a>
    </div>
  </li>
</ul>

CSS

* {
  box-sizing: border-box;
}
body {
  background-color: #f5f5f5;
  margin: 0 auto; 
  max-width: 60em;
  line-height: 1.3;
}
ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}
img {
  width: 100%;
}
h2 {
  margin-top: 0;
  margin-bottom: 0.4em;
}

/*Flex items*/
.list {
  display: flex;
  flex-wrap: wrap;
}
.list-item {
    display: flex; 
  padding: 0.5em;
    width: 100%;
}
@media all and (min-width: 40em) {
  .list-item {
    width: 50%;
  }
}
@media all and (min-width: 60em) {
  .list-item {
    width: 33.33%;
  }
}
.list-content {
    background-color: #fff;
  display: flex;
  flex-direction: column;
  padding: 1em;
    width: 100%;
}
.list-content p {
    flex: 1 0 auto;
}

score 0 · Answer 2 · edited Oct 13 '20 at 08:24

0

On your site (from that link), in .blog-posts.grid-system -> .all-blog-posts -> .row -> .col-lg-4 , add "display:flex" and then in child element .down-content , set "height:100%".

This may not be the cleanest way, but it's the fastest :) and it's working.

edited Oct 13 '20 at 08:24

Dharman

30,962
25
85
135

answered Oct 13 '20 at 08:18

Johnny Tee

216
2
10

score 0 · Accepted Answer · answered Oct 13 '20 at 08:36

somewhere in your CSS there is this line, and the min-height is set to "24em", change it to 45em and you'll be good. The Switch between latin and arabic letters change the size of the text so it gets pushed down and up a bit.

.blog-posts .down-content {
    padding: 40px;
    border-right: 1px solid #eee;
    border-left: 1px solid #eee;
    border-bottom: 1px solid #eee;
    min-height: 45em; 
}

How can I make containers have the same size?

3 Answers3