1

I am trying to have divs of the same size, with some of the content within each aligned, but with different lengths.

I would like the icon and the text to stay in the same position on all divs, but have the divs stretch at the bottom so they are the same size.

Here is my code:

.servicescontainer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background-color: white;
  border-radius: 30px;
  padding: 20px;
  box-shadow: 3px 3px 20px #333;
  min-height: 240px;
}
.servicesicon {
  width: 50px;
  margin-left: auto;
    margin-right: auto;
  margin-top: 20px;
  }
  
.servicestext {
  width: 100%;
  text-align: center;
  position: relative;
  padding-right: 10px;
}
<div class="servicescontainer">
    <div class="servicesicon">
         <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg">
</svg>
    </div>
    <div class="servicestext">
        <h4>
      Repairs
    </h4>
        <ul>
            <li>Custom Replacement Parts</li>
            <li>Hydraulic Cylinder Repair & Refurbish</li>
            <li>Heavy Equipment Repair & Modification</li>
        </ul>
    </div>
</div>

<div class="servicescontainer">
    <div class="servicesicon">
         <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg">
</svg>
    </div>
    <div class="servicestext">
        <h4>
      Welding & Fabrication
    </h4>
        <ul>
            <li>Certified Steel, Aluminum & Stainless Welding</li>
            <li>Structural Fabrication & Assembly</li>
            <li>Metal Forming & Cutting</li>
          <li>Onsite Portable Services</li>
        </ul>
    </div>
</div>

I've tried using position: relative and position: absolute with no luck. I have tried using min-height but it stretches the text and the h4 titles end up not being aligned properly. (svg removed for cleanliness)

Here is the before and after I am trying to do

Liveyourlife27
  • 13
  • 2

3 Answers3

0

You can do it like this:

#container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.box {
  border: 2px solid black;
  width: 25%;
  padding: 1%;
  margin: 1%;
} 
<div id="container">
  <div class="box">
    <h4>Animals</h4>
    <ul>
      <li>Aardvark</li>
      <li>Badger</li>
      <li>Cougar</li>
    </ul>
  </div>
  <div class="box">
    <h4>Fruit</h4>
    <ul>
      <li>Apricot</li>
      <li>Banana</li>
      <li>Cherry</li>
      <li>Date</li>
      <li>Elderberry</li>
      <li>Fig</li>
    </ul>
  </div>
  <div class="box">
    <h4>Trees</h4>
    <ul>
      <li>Sycamore</li>
    </ul>
  </div> 
  <div class="box">
    <h4>Fruit</h4>
    <ul>
      <li>Apricot</li>
      <li>Banana</li>
      <li>Cherry</li>
      <li>Date</li>
      <li>Elderberry</li>
      <li>Fig</li>
      <li>Grapefruit</li>
      <li>Hedgehog</li>
    </ul>
  </div>
  <div class="box">
    <h4>Trees</h4>
    <ul>
      <li>Sycamore</li>
    </ul>
  </div>   
  <div class="box">
    <h4>Animals</h4>
    <ul>
      <li>Aardvark</li>
      <li>Badger</li>
      <li>Cougar</li>
    </ul>
  </div>  
</div>
Robson
  • 2,008
  • 2
  • 7
  • 26
0

I put both your divs into a container and had that as display: flex. I think that brings it into focus of the image you showed. You can then mess with padding/margins to space it out.

/* Container I added */
container {
  display: flex;
  flex-direction: row;
  /* flex-wrap: wrap; */  
 
/* note flex-wrap will wrap it to the next line
i took it out just to show you how your picture displayed */

}
.servicescontainer {
  background-color: white;
  border-radius: 30px;
  padding: 20px;
  box-shadow: 3px 3px 20px #333;
  min-height: 240px;
}
.servicesicon {
  width: 50px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  }
  
.servicestext {
  width: 100%;
  text-align: center;
  position: relative;
  padding-right: 10px;
}
    <container>
      <div class="servicescontainer">
        <div class="servicesicon">
             <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg">
        </svg>
        </div>
        <div class="servicestext">
            <h4>
          Repairs
        </h4>
            <ul>
                <li>Custom Replacement Parts</li>
                <li>Hydraulic Cylinder Repair & Refurbish</li>
                <li>Heavy Equipment Repair & Modification</li>
            </ul>
        </div>
        </div>
        
        <div class="servicescontainer">
        <div class="servicesicon">
             <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg">
        </svg>
        </div>
        <div class="servicestext">
            <h4>
          Welding & Fabrication
        </h4>
            <ul>
                <li>Certified Steel, Aluminum & Stainless Welding</li>
                <li>Structural Fabrication & Assembly</li>
                <li>Metal Forming & Cutting</li>
              <li>Onsite Portable Services</li>
            </ul>
        </div>
        </div>
    </container>
Brandon
  • 374
  • 2
  • 15
0

first wrap your servicescontainer with a div and give it flex-container class

.flex-container{
  display:flex;
  align-items:strech;
  gap:10px;
 /* flex-wrap: wrap; */ 
}

and change the flex-direction for .servicescontainer to column

the give .servicesicon height to be fixed in style

.flex-container{
display:flex;
align-items:strech;
gap:10px;
/* flex-wrap: wrap; */ 
}

.servicescontainer {
  display: flex;
  flex-direction: column;
  flex-wrap: no-wrap;
  align-items: flex-start;
  justify-content: start;
  background-color: white;
  border-radius: 30px;
  padding: 20px;
  box-shadow: 3px 3px 20px #333;
  min-height: 240px;
}
.servicesicon {
  width: 50px;
  margin-left: auto;
    margin-right: auto;
  margin-top: 20px;
  background:blue;
  height:50px;
  }
  
.servicestext {
  width: 100%;
  text-align: center;
  position: relative;
  padding-right: 10px;
}
<div class="flex-container">
<div class="servicescontainer">
    <div class="servicesicon">
         <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg">
</svg>
    </div>
    <div class="servicestext">
        <h4>
      Repairs
    </h4>
        <ul>
            <li>Custom Replacement Parts</li>
            <li>Hydraulic Cylinder Repair & Refurbish</li>
            <li>Heavy Equipment Repair & Modification</li>
        </ul>
    </div>
</div>

<div class="servicescontainer">
    <div class="servicesicon">
         <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg">
</svg>
    </div>
    <div class="servicestext">
        <h4>
      Welding & Fabrication
    </h4>
        <ul>
            <li>Certified Steel, Aluminum & Stainless Welding</li>
            <li>Structural Fabrication & Assembly</li>
            <li>Metal Forming & Cutting</li>
            <li>Certified Steel, Aluminum & Stainless Welding</li>
            <li>Structural Fabrication & Assembly</li>
            <li>Metal Forming & Cutting</li>
            <li>Certified Steel, Aluminum & Stainless Welding</li>
            <li>Structural Fabrication & Assembly</li>
            <li>Metal Forming & Cutting</li>
          <li>Onsite Portable Services</li>
        </ul>
    </div>
</div>
</div>
AL.Sharie
  • 1,526
  • 1
  • 9
  • 14