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>
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.
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.
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.
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
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.
