CSS Flexbox How to evenly space two elements with a separator

Question

I am trying to evenly space two HTML elements (div) which both contain a list of tags/links. The container width is 600px and there is a separator in between these two lists.

By running the snippet below you can see how the .dropdownSection elements are evenly sized using flex: 1. However, my problem is the separator (.sectionSeparator ) doesn't look even between the two lists?

What can I do to make it so that everything is evenly spaced, it seems like gap: 30px works well but the separator still isn't even, the second list is too close to the separator.

The reason I have used position: absolute on .dropdownLinks is so that the CSS hover transition does not push and cause other divs to be moved.

Maybe there is another way to structure this but this is my attempt.

Note: The grey boxes are to represent icons that would be there.

#container {
  width: 600px;
  padding-top: 20px;
}

#listSectionContainer {
  display: flex;
  justify-content: space-evenly;
  padding: 30px;
  gap: 30px;
}

.dropdownSection {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  height: 210px;
  flex: 1;
}

.sectionSeparator {
  width: 3px;
  background-color: rgba(178, 178, 178, 0.35);
  border-radius: 8px;
}

.dropdownSectionTitle {
  display: flex;
  align-items: flex-start;
  margin-right: auto;
  color: #8B8792;
  font-size: 20px;
}

.dropdownSectionTitle i {
  height: 20px;
  width: 20px;
  background: grey;
  margin-right: 10px;
}

.dropdownSectionTitle p {
  font-weight: bold;
  margin: 0;
}

.dropdownLinks {
  display: flex;
  flex-direction: column;
  margin-top: 25px;
  font-size: 18px;
  padding-left: 28px;
  position: absolute;
  top: 20px;
}

.dropdownLinks a:not(:last-of-type) {
  margin-bottom: 10px;
}

.dropdownLinks a:link {
  color: #939393;
  text-decoration: none;
  transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
}

.dropdownLinks a:visited {
  color: #939393;
  text-decoration: none;
}

.dropdownLinks a:hover {
  color: #7B69FE;
  padding-left: 5px;
  text-decoration: none;
}

.dropdownLinks a:active {
  color: #939393;
  text-decoration: none;
}


  
    
      
        Getting Started
      
      
        Introduction
        Introduction Two
        Introduction Three
        Introduction Four
        Introduction Five
      
    
    
    
      
        Second List
      
      
        Introduction
        Introduction Two
        Introduction Three
        Introduction Four
        Introduction Five

Abin Thaha · Accepted Answer

After further investigation, there is nothing wrong in your code.

As you can see in the below snippet. The sections are evenly separated from the vertical line.

I have used a border for both container and the sections to understand that clearly.

#container {
  width: 600px;
  padding-top: 20px;
}

#listSectionContainer {
  display: flex;
  justify-content: space-evenly;
  padding: 30px;
  gap: 30px;
  border: 1px solid blue;
}

.dropdownSection {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  height: 210px;
  flex: 1;
  border: 1px solid #f00;
}

.sectionSeparator {
  width: 3px;
  background-color: rgba(178, 178, 178, 0.35);
  border-radius: 8px;
}

.dropdownSectionTitle {
  display: flex;
  align-items: flex-start;
  margin-right: auto;
  color: #8B8792;
  font-size: 20px;
}

.dropdownSectionTitle i {
  height: 20px;
  width: 20px;
  background: grey;
  margin-right: 10px;
}

.dropdownSectionTitle p {
  font-weight: bold;
  margin: 0;
}

.dropdownLinks {
  display: flex;
  flex-direction: column;
  margin-top: 25px;
  font-size: 18px;
  padding-left: 28px;
  position: absolute;
  top: 20px;
}

.dropdownLinks a:not(:last-of-type) {
  margin-bottom: 10px;
}

.dropdownLinks a:link {
  color: #939393;
  text-decoration: none;
  transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
}

.dropdownLinks a:visited {
  color: #939393;
  text-decoration: none;
}

.dropdownLinks a:hover {
  color: #7B69FE;
  padding-left: 5px;
  text-decoration: none;
}

.dropdownLinks a:active {
  color: #939393;
  text-decoration: none;
}


  
    
      
        Getting Started
      
      
        Introduction
        Introduction Two
        Introduction Three
        Introduction Four
        Introduction Five
      
    
    
    
      
        Second List
      
      
        Introduction
        Introduction Two
        Introduction Three
        Introduction Four
        Introduction Five

CSS Flexbox How to evenly space two elements with a separator

Answers (1)

Related Questions