# Column separated by a vertical line?

**URL:** <https://forums.realmacsoftware.com/t/column-separated-by-a-vertical-line/35502>\
**Category:** RapidWeaver Classic\
**Created:** [November 2, 2020, 11:01am UTC](https://forums.realmacsoftware.com/t/column-separated-by-a-vertical-line/35502 "2020-11-02T11:01:22Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Wild\_glio](https://avatars.discourse-cdn.com/v4/letter/w/5daacb/32.png) [@Wild\_glio](https://forums.realmacsoftware.com/u/Wild_glio)\
**Post date:** [November 2, 2020, 11:01am UTC](https://forums.realmacsoftware.com/t/column-separated-by-a-vertical-line/35502/1 "2020-11-02T11:01:23Z")

</div>

I have a page with two columns and single column areas. I would like to be able to have a vertical line between the two columns to separate them. Is this possible using styles or similar? The page is over 3500 lines of code so would hate to have to go through every column stack to edit it!! TIA

---

<div class="post-metadata">

**Author:** ![dripple](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dripple/32/20481_2.png) [@dripple](https://forums.realmacsoftware.com/u/dripple)\
**Post date:** [November 2, 2020, 11:26am UTC](https://forums.realmacsoftware.com/t/column-separated-by-a-vertical-line/35502/2 "2020-11-02T11:26:37Z")

</div>

Assuming you use stacks, you can set some CSS for the left and right column. Check the source code for the correct class, but I think it’s `s3_column_left` and `s3_column_right`:

```
.s3_column_left { border-right: 1px solid blue; }

```

 ![Screenshot 2020-11-02 at 12.25.42](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/c/4/c4ce589198c2770415231823cb69eafb60a8a04d.png)

---

<div class="post-metadata">

**Author:** ![Wild\_glio](https://avatars.discourse-cdn.com/v4/letter/w/5daacb/32.png) [@Wild\_glio](https://forums.realmacsoftware.com/u/Wild_glio)\
**Post date:** [November 2, 2020, 4:23pm UTC](https://forums.realmacsoftware.com/t/column-separated-by-a-vertical-line/35502/3 "2020-11-02T16:23:30Z")

</div>

Thanks drizzle. I changed the s3 part to .historyclass and I get the blue line down the right of the two columns, but I do not get it between the columns where there are two columns. I have experimented and can get the blue line on all sides of the one column!  
The page is a trial at the moment at [https://glio.me.uk/Trial/page-15/](https://glio.me.uk/Trial/page-15/). For the date 5-Apr-1802 I want there to be a vertical line between the 5th & 6th April

---

<div class="post-metadata">

**Author:** ![Wild\_glio](https://avatars.discourse-cdn.com/v4/letter/w/5daacb/32.png) [@Wild\_glio](https://forums.realmacsoftware.com/u/Wild_glio)\
**Post date:** [November 2, 2020, 4:24pm UTC](https://forums.realmacsoftware.com/t/column-separated-by-a-vertical-line/35502/4 "2020-11-02T16:24:17Z")

</div>

Don’t you just love autocorrect! I did type dripple

---

<div class="post-metadata">

**Author:** ![teefers](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/teefers/32/8173_2.png) [@teefers](https://forums.realmacsoftware.com/u/teefers)\
**Post date:** [November 2, 2020, 5:29pm UTC](https://forums.realmacsoftware.com/t/column-separated-by-a-vertical-line/35502/5 "2020-11-02T17:29:08Z")

</div>

Hi Geoff,

It looks like you are using Foundation 6 correct?

It also looks like you have your stacks option not to show stacks meta tags or Comments in HTML Correct?

![2020-11-02_10-16-19](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/e/9/e93e55c00b87e671b400c52ccd4ac4ceed71fd84.png)

That makes it harder for people to help you out.

Anyway it looks like you are using a simple Foundation 2 coulum stack for the area you want the divider for correct?

If you change it to a Columns Pro stack, you can add a Column Divider easily. It’s a built-in feature.

 ![2020-11-02_10-20-38](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/4/9/49b9eeb4bd8d1b9a2b9cd2bd5198f7d7618a339c.png)

Joe explains it hear:

[![](https://img.youtube.com/vi/gtUPumwNw7c/maxresdefault.jpg "What's New in Foundation 6.1") ](https://www.youtube.com/watch?v=gtUPumwNw7c&t=1545)

You can do it with CSS, but you will have to take into account Small screen sizes where the columns stack.

If it’s too much work to convert the text to columns Pro then post back and I can give you some CSS.

---

<div class="post-metadata">

**Author:** ![Wild\_glio](https://avatars.discourse-cdn.com/v4/letter/w/5daacb/32.png) [@Wild\_glio](https://forums.realmacsoftware.com/u/Wild_glio)\
**Post date:** [November 2, 2020, 10:05pm UTC](https://forums.realmacsoftware.com/t/column-separated-by-a-vertical-line/35502/6 "2020-11-02T22:05:33Z")

</div>

Thank you Doug. I have an awful lot of work to go back over what I have done with ordinary columns! Columns Pro certainly does exactly what I want, I just wish I had asked the question earlier. 😁 I did look at Columns Pro at one point, but it looked a bit complicated, so I used the simple columns.  
Columns Pro confused me at first because the columns appeared to be rows until you previewed the page. My page from 1800 onwards now has the vertical lines. Thanks again

---

<div class="post-metadata">

**Author:** ![teefers](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/teefers/32/8173_2.png) [@teefers](https://forums.realmacsoftware.com/u/teefers)\
**Post date:** [November 2, 2020, 10:10pm UTC](https://forums.realmacsoftware.com/t/column-separated-by-a-vertical-line/35502/7 "2020-11-02T22:10:53Z")

</div>

If you want the divider on every column you have you can add something like this:

```auto
@media print, screen and (min-width: 40em) {

   .grid-x > div {
      border-right: 1px solid darkblue;
   }
   .grid-x > div:last-of-type {
    border-right: none;
   }

}

```

That should prevent the border on small screens and add it for every column.

You can of course change the color and size.

---

<div class="post-metadata">

**Author:** ![peppermint](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/peppermint/32/218_2.png) [@peppermint](https://forums.realmacsoftware.com/u/peppermint)\
**Post date:** [November 3, 2020, 1:54am UTC](https://forums.realmacsoftware.com/t/column-separated-by-a-vertical-line/35502/8 "2020-11-03T01:54:19Z")

</div>

Is it possible that Text Columns does the trick?  
Just guessing

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/system/32/25301_2.png) [@system](https://forums.realmacsoftware.com/u/system)\
**Post date:** [December 3, 2020, 11:54am UTC](https://forums.realmacsoftware.com/t/column-separated-by-a-vertical-line/35502/9 "2020-12-03T11:54:22Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.