Vertical line between two divs?

Question

I have a problem with positioning the vertical line. Here's the project: https://prnt.sc/wp2vh4

div class="col span-1-of-2"

to separate those two lists BUT - there's a grey vertical line in the 'center' between them. When I make border-right for the first div, it's way too on the right side. How can I make this line more in the center?

two elements are block - should it be something connected to that? but I don't want to 'ruin' the column system.

Use flexbox in your case. It's way harder positioning elements the way you're doing it. — Hasan Al-Aref, Jan 15 '21 at 15:30
Using an external link is not a great practice, because it can change over time, rendering the question out of date. Additionally, many users may be reluctant to exit blindly to outside links. I would recommend you consider putting a [mcve] directly in the question, ideally as a snippet. — Alexander Nied, Jan 15 '21 at 18:27
It really would be nice to see what you've tried already (code not the result). That said, there are so many ways to accomplish a vertical divider between columns. Knowing a little bit about what you've already done and your requirements would help you get a better answer. — Bryce Howitson, Jan 15 '21 at 18:45

score 2 · Answer 1 · edited Jan 15 '21 at 19:07

You could essentially take the two columns and give them a box-shadow of a half pixel each (totaling to 1px side by side). Half pixels don't work with border declarations reason being.

.container {
  display: flex;
  height: 150px;
}

.col {
  align-items: center;
  display: flex;
  flex: 1;
  justify-content: center;
}

.left {
  box-shadow: .5px 0 0 #000;
}

.right {
  box-shadow: -.5px 0 0 #000;
}

<div class="container">
  <div class="col left">Left</div>
  <div class="col right">Right</div>
</div>

score 1 · Answer 2 · answered Jan 15 '21 at 18:58

There are a lot of ways to do this, another solution would be using the old columns css property, like this

.container {
   columns: 2;
   column-gap: 0;
   column-fill: balance;
   column-rule: 2px solid #ff44cc;
   
   text-align: center;
   padding: 10px;
}

<div class="container">
    <div>Block</div>
    <div>Block</div>
</div>

Take the solution that mosts suits you.

score 0 · Answer 3 · answered Jan 15 '21 at 19:06

There are many ways to accomplish a vertical divider between columns.

Option #1

The easiest is to utilize CSS flex-box to create the columns. This will cause both columns to be the same height in the container and you can use a border to create the visual divider.

/* this section illustrates the container sizes */

#container {
    border: 1px dashed #dadada;
    padding: 2px;
}

.col {
  padding: 20px;
  font-family: Helvetica, Arial, Sans-serif;
  background: tan;
  border: 1px dashed #333;
}

/* this shows the solution */

#container {
  display:flex;
  justify-content: space-between;
}
.col {
  flex-basis: 50%;
}
.col:first-child {
  border-right: 3px solid aqua;
}

<div id="container">
   <div class="col">Column 1</div>
   <div class="col">Column 2 with lots of content that makes it much taller than the other column and messes with heights.</div>
</div>

Option #2

Use a pseudo element on the parent container to create a border.

/* this section illustrates the container sizes */

#container {
  border: 1px dashed #dadada;
  padding: 2px;
}

.col {
  padding: 20px;
  font-family: Helvetica, Arial, Sans-serif;
  background: tan;
  border: 1px dashed #333;
}

/* The solution */
#container {
  position: relative;
  overflow: auto;
}
#container:before {
  content: '';
  width: 2px;
  background: aqua;
  position: absolute;
  top: 0;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}
.col {
  float:left;
  width: calc(50% - 42px);
  /* need to remove the border & padding width from the full width */
}

<div id="container">
<div class="col">Column 1</div>
<div class="col">Column 2 with lots of content that makes it much taller than the other column and messes with heights.</div>
</div>

Option #3

Really there are lots more options, a CSS gradient background, shadows, CSS Grid, CSS Columns, this list goes on.

Vertical line between two divs?

3 Answers3

Option #1

Option #2

Option #3