[Resolved] Add vertical 1px line between two columns

[Alex]

Hi, I am using grid columns plugin per your suggestion in another post.. I made two columns 50/50, but I want to add a vertical 1px line between the two to separate them. Would you know of a somewhat easy way to accomplish this?

[Tom]

Your best bet would be to add a div inside the first column, like this:

[column grid="2" span="1"]<div class="right-border">Your content in here</div>[/column]

Then you can add this CSS and adjust the border color:

@media (min-width: 769px) {
      .right-border {
            border-right: 1px solid #DDD;
      }
}

[Alex]

That would work, however, the border is not in between the two columns but a right border of the first, so it looks misaligned. Any way to push it further right?

See http://www.activeito.com/blog/computer-services-2/

[Alex]

I found code that should work, but I can’t seem to implement it.. Maybe you can help.

http://philhoyt.com/2014/09/19/pure-css-vertical-divider/

http://martinsdevblog.blogspot.com/2013/06/flexible-css-column-separators-done.html

[Tom]

My initial code should work if you add this:

body .column-grid .column {
      margin-right: 0;
      padding-right: 5%;
}

[Author]

Posts