border between columns css

Question

How do I draw a vertical border (newspaper-like) between the columns I've create? I'm also open to writing this in css3.

    #contentBox 
{
    margin: 0 auto;
    width: 80%;
}

#contentBox .article
{
    float: left;
    margin: 0;
    width: 50%;
    border-right: solid;
}

Then haml:

#contentBox
  .article
     %p text
  .article
     %p text

you can inspire yourself from http://alistapart.com/article/fauxcolumns and use a gradient instead, you may use an absolute pseudo too, ... many ways actually that can be used — G-Cyrillus, Jan 13 '16 at 15:39
haml, yep, but here we have two empty blocks .... wich have an height of 0 ..nothing to see — G-Cyrillus, Jan 13 '16 at 15:39
@liroy that isn't HTML, but i've answered this for you below. — Aaron, Jan 13 '16 at 15:53

score 3 · Accepted Answer · answered Jan 13 '16 at 16:01

as commented, 2 simple options:

1) pseudo

   #contentBox {
     margin: 0 auto;
     width: 80%;
     overflow: hidden;
     /* wraps floatting element */
   }
   #contentBox .article {
     float: left;
     margin: 0;
     width: 50%;
   }
   /* test  */
   #contentBox .article {
     height: 300px;
     background: rgba(0, 0, 0, 0.2);
   }
   #contentBox .article:nth-child(1) {
     height: 200px;
   }
   /* pseudo option */
   #contentBox {
     position: relative;
   }
   #contentBox:before {
     content: '';
     position: absolute;
     left: 50%;
     top: 0;
     bottom: 0;
     border-left: 1px solid;
   }

<div id='contentBox'>
  <div class='article'></div>
  <div class='article'></div>
</div>

http://codepen.io/anon/pen/JGyJLo

2) background-image (linear gradient for test) old solid method described here

   #contentBox {
     margin: 0 auto;
     width: 80%;
     overflow: hidden;
     /* wraps floatting element */
   }
   #contentBox .article {
     float: left;
     margin: 0;
     width: 50%;
   }
   /* test  */
   #contentBox .article {
     height: 300px;
     background: rgba(0, 0, 0, 0.2);/*  to see just because they might have different height */
   }
   #contentBox .article:nth-child(1) {
     height: 200px;
   }
   #contentBox {
     background: linear-gradient(to left, transparent 49.95%, black 49.95%, black 50%, transparent 50%)
   }

<div id='contentBox'>
  <div class='article'></div>
  <div class='article'></div>
</div>

http://codepen.io/anon/pen/VezWMe

Kurt Van den Branden · Answer 2 · 2016-01-13T16:01:26.940

1

Add the following lines to your css:

#contentBox .article
{   
    border-right-style: solid;
    border-right-color: #CCC;
    border-right-width: thin;
}

edited Jan 13 '16 at 16:01

answered Jan 13 '16 at 15:42

Kurt Van den Branden

11,995
10
76
85

the border does appear but eliminates the columns--creating one long column instead of two. – Jan 13 '16 at 15:57
Your div's are too wide with text in it. To fit in the contentBox, lower their percentage. – Kurt Van den Branden Jan 13 '16 at 16:16
one more thing--how do I control the height of the border (make shorter than the overall div?) – Jan 13 '16 at 17:11
Give it a top- and bottom padding (padding: 1% 0;) – Kurt Van den Branden Jan 13 '16 at 17:16
It changes the entire div--not only the border... – Jan 13 '16 at 17:50

score 1 · Answer 3 · answered Jan 13 '16 at 15:49

add box-sizing for the use of percentage widths and borders.

Then apply the border to the first article to split them with a single line.

* {
  box-sizing: border-box;
}
#contentBox {
  margin: 0 auto;
  width: 80%;
}
#contentBox article {
  float: left;
  margin: 0;
  width: 50%;
  height: 600px; /* DEMO HEIGHT */
}
#contentBox article:first-child {
  border-right: 2px solid red;
}

<div id="contentBox">
  <article>Change the HTML article to any tag/element you would like to use...</article>
  <article>Change the HTML article to any tag/element you would like to use...</article>
</div>

score 0 · Answer 4 · answered Jan 13 '16 at 15:44

0

the border is there just because its a block element so the border is displaying by the edge of screen you can do display: inline
here is a jsfiddle https://jsfiddle.net/kpx1tqf6/1/

answered Jan 13 '16 at 15:44

David Genger

875
10
25

border between columns css

4 Answers4