1

I have a div section with three divs inside and I want them to be spaced evenly. Here is what it currently looks like on my site. My goal is for them all to be aligned and spaced out evenly.

enter image description here

Here is the CSS and HTML I'm using:

.knowledge-section {
}

.section-icon {
 height: 25px;
 width: 25px;
 display: inline-block;
 position: absolute;
 top: 0px;
 left: 0px;
}

.knowledge-item {
 background: white;
 border-radius: 4px;
 padding-top: 2px;
 padding-bottom: 30px;
 padding-left: 40px;
 padding-right: 35px;
 display: inline-block;
 position: relative;
}

.first-item {
    margin-right: 20px;
}
  <div class="knowledge-section">

    <div class="knowledge-item first-item">
        <div class="section-icon"><img src="admin-suite.png" />   </div>
      <h2>Admin Suite</h2>
    </div><!--k-item-->

    <div class="knowledge-item">
        <div class="section-icon"><img src="mobile.png" /></div>
      <h2>Mobile and Voices</h2>
    </div><!--k-item-->
      
    <div class="knowledge-item">
        <div class="section-icon"><img src="conversations.png" /></div>
        <h2><a href="www.google.com">Conversations</a></h2>
    </div><!--k-item-->

  </div> <!--k-section-->

  <div class="knowledge-section">

    <div class="knowledge-item first-item">
        <div class="section-icon"><img src="digital.png" /></div>
      <h2>Digital</h2>
    </div><!--k-item-->

    <div class="knowledge-item">
        <div class="section-icon"><img src="journey-analytics.svg" /></div>
      <h2>Journey Analytics</h2>
    </div><!--k-item-->
      
    <div class="knowledge-item">
        <div class="section-icon"><img src="strikedeck.png" /></div>
        <h2><a href="www.google.com">Strikedeck</a></h2>
    </div><!--k-item-->

  </div> <!--k-section-->
j08691
  • 204,283
  • 31
  • 260
  • 272
Kevin
  • 13
  • 2
  • Note: the `` tag does not use and does not need a closing slash and never has in HTML. – Rob Dec 07 '19 at 20:22
  • Does this answer your question? [how to evenly distribute elements in a div next to each other?](https://stackoverflow.com/questions/7245018/how-to-evenly-distribute-elements-in-a-div-next-to-each-other) - this question is old, but there are new relevant answers: https://stackoverflow.com/a/33239116/1172189 – disinfor Dec 07 '19 at 20:45

4 Answers4

0

.knowledge-section {

  display: grid;
  grid-template-columns: repeat(6, auto);
  background-color:gold;
  padding:10px;
  grid-gap:10px;

}

.section-icon {

display:grid;
justify-content:center;

}

h2 {

 text-align: center;
 background-color:burlywood;

}

.knowledge-item{

background:coral;

}

cd4success
  • 77
  • 1
  • 9
0

        <div class="knowledge-item first-item">
            <div class="section-icon"><img src="avatar.png" width="20" height="20" />   </div>
          <h2>Admin Suite</h2>
        </div><!--k-item-->

        <div class="knowledge-item">
            <div class="section-icon"><img src="avatar.png" width="20" height="20" /></div>
          <h2>Mobile and Voices</h2>
        </div><!--k-item-->

        <div class="knowledge-item">
            <div class="section-icon"><img src="avatar.png" width="20" height="20" /></div>
            <h2><a href="www.google.com">Conversations</a></h2>
        </div><!--k-item-->

        <div class="knowledge-item first-item">
            <div class="section-icon"><img src="avatar.png" width="20" height="20" /></div>
          <h2>Digital</h2>
        </div><!--k-item-->

        <div class="knowledge-item">
            <div class="section-icon"><img src="avatar.png" width="20" height="20" /></div>
          <h2>Journey Analytics</h2>
        </div><!--k-item-->

        <div class="knowledge-item">
            <div class="section-icon"><img src="avatar.png" width="20" height="20" /></div>
            <h2><a href="www.google.com">Strikedeck</a></h2>
        </div><!--k-item-->

      </div> <!--k-section-->
cd4success
  • 77
  • 1
  • 9
  • Now I wrapped all the sub-divs (knowledge-item) with one single knowledge-section. You can just use the same format to split them in case you want them separated into three divs each within each knowledge-section. – cd4success Dec 07 '19 at 20:42
0

You just need to display the div with class .knowledge-section as flex container like this:

.knowledge-section {
        width: 800px;
        display: flex;
        justify-content: space-between;
    }
AzafoCossa
  • 874
  • 8
  • 18
  • Thanks Azafo. I was able to get it looking pretty good using the following: .knowledge-section { width: 100%; display: flex; justify-content: space-between; } Then I added a width rule of 33% to knowledge-item: .THIS .knowledge-item { background: white; padding-top: 2px; padding-bottom: 30px; padding-left: 40px; padding-right: 35px; display: inline-block; position: relative; width: 33%; } The only issue I run into is when viewing on a Mobile device it doesn't resize correctly. Any suggestions? – Kevin Dec 08 '19 at 22:16
  • You can write @media screen to render it properly on small devices like this: @media(max-width: 600px) { .knowledge-section { flex-direction: column; color: brown; } .knowledge-item { display: flex; width: 100%; } }, and add reset style for your page at the top of your stylesheet *{box-sizing:border-box;} – AzafoCossa Dec 09 '19 at 10:15
  • Awesome! Thanks for your help Azafo. – Kevin Dec 10 '19 at 18:54
0

@Azafo I was able to get it looking pretty good using a modified version of your code:

.knowledge-section {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

Then I added a width rule of 33% to knowledge-item:

.THIS .knowledge-item {
 background: white;
 padding-top: 2px;
 padding-bottom: 30px;
 padding-left: 40px;
 padding-right: 35px;
 display: inline-block;
 position: relative;
        width: 33%;
}

Here's how it looks:

enter image description here

The only issue I run into is when viewing on a Mobile device it doesn't resize correctly. Any suggestions? Here's how it looks on mobile:

enter image description here

Kevin
  • 13
  • 2