CODEWITHSUNDEEP
htmlcss
marion moseby
marion moseby

Reputation: 29

Vertical line between two divs?

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.

Upvotes: 0

Views: 4733

Answers (3)

Carl Edwards
Carl Edwards

Reputation: 14434

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>
  

Upvotes: 2

Bryce Howitson
Bryce Howitson

Reputation: 7690

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.

Upvotes: 0

Gunther
Gunther

Reputation: 1328

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.

Upvotes: 2

Related Questions