Column lines?

[Edrol97]

Hi all, wondering how to create lines between columns of text. I currently have this, but want the lines between the text as well. Do I need to specify new coordinates to shift additional lines over.

This is my current code for the lines in question. I also have tried adding styling of divs to create the lines, but wonder if there's a better way than having loads of divs.

.content-box{
    border-left: 8px solid black;
    border-right: 8px solid black;
}

 

[JosiahMaybe]

You could either have one element with a background color and all others not occupying space so it shows or you could have an element with a background color and have it height you want like top at top bottom at bottom of your layout and a specified width for your lines. Maybe like inline style and a div for a column and like each is a percent of width and so are lines like say 23% for divs and 2% lines. To make things easy you could just make an outline right and left for your divs in specified colors. You could specify colors and styles. X E.

 

[Edrol97]

You could either have one element with a background color and all others not occupying space so it shows or you could have an element with a background color and have it height you want like top at top bottom at bottom of your layout and a specified width for your lines. Maybe like inline style and a div for a column and like each is a percent of width and so are lines like say 23% for divs and 2% lines. To make things easy you could just make an outline right and left for your divs in specified colors. You could specify colors and styles. X E.

This has gone a bit over my head after a day of work. Can you dumb it down slightly?

 

[tomliv]

This has gone a bit over my head after a day of work. Can you dumb it down slightly?

How are you achieving the columns shown?

 

[Johna]

Hi there, is this question the same as the one you asked here?

https://codeforum.org/threads/drawing-a-line-to-separate-column-divs-in-html-and-css.7342

 

[JosiahMaybe]

You already have columns set out so I would say use the outline or border properties to make an outline part where you want your lines. X E.

 

[Edrol97]

How are you achieving the columns shown?

footer{
    position: relative;
    bottom: 20px;
}
.title_text1{
    font-family: Eliot Lord;
    font-size: 30pt;
}
.content-box{
    columns: 4 auto;
    max-width: 1400px;
    border-left: 8px solid black;
    border-right: 8px solid black;
}
.content-box a{
    font-size: 18pt;
}
.column:not(:last-child) {
    border-right: 1px solid black;
  }
h4{
    font-family: Times;
    font-size: 30pt;
}
@media only screen and (max-width: 768px) {
    b {
      font-size: 20pt;
    }
  }
  
  @media only screen and (max-width: 320px) {
    b {
      font-size: 10pt;
    }
  }
.vertical {
    border-left: 8px solid black;
    height: 300px;
    position:relative;
    left: 23%;
    bottom: 295px;
  }
  .content-box1{
    columns: 2;
    max-width: 1400px;
  }
  }

This is what I have on it in my CSS.

 

[JosiahMaybe]

I notice an extra } at end of that, is that part of something?

 

[tomliv]

footer{
    position: relative;
    bottom: 20px;
}
.title_text1{
    font-family: Eliot Lord;
    font-size: 30pt;
}
.content-box{
    columns: 4 auto;
    max-width: 1400px;
    border-left: 8px solid black;
    border-right: 8px solid black;
}
.content-box a{
    font-size: 18pt;
}
.column:not(:last-child) {
    border-right: 1px solid black;
  }
h4{
    font-family: Times;
    font-size: 30pt;
}
@media only screen and (max-width: 768px) {
    b {
      font-size: 20pt;
    }
  }
 
  @media only screen and (max-width: 320px) {
    b {
      font-size: 10pt;
    }
  }
.vertical {
    border-left: 8px solid black;
    height: 300px;
    position:relative;
    left: 23%;
    bottom: 295px;
  }
  .content-box1{
    columns: 2;
    max-width: 1400px;
  }
  }

This is what I have on it in my CSS.

I am guessing .content-box with columns: 4 is what is giving you your columns.

A quick google search turned up the following:

column-gap: 40px;
column-rule: 1px solid #000;

Here is some more info on that:

column-rule CSS property - CSS | MDN

The column-rule shorthand CSS property sets the width, style, and color of the lines drawn between columns in multi-column grid, flex, and multi-col layouts.

developer.mozilla.org

 

[Edrol97]

I am guessing .content-box with columns: 4 is what is giving you your columns.

A quick google search turned up the following:

column-gap: 40px;
column-rule: 1px solid #000;

Here is some more info on that:

column-rule CSS property - CSS | MDN

The column-rule shorthand CSS property sets the width, style, and color of the lines drawn between columns in multi-column grid, flex, and multi-col layouts.

developer.mozilla.org

Thanks- Problem solved. It's looking good now.

 

[tomliv]

Thanks- Problem solved. It's looking good now.

Can you mark my answer as solution?