Separate div with partial vertical lines with margins only

Question

Is it possible to achive this design just setting margin to the three divs containing the text? Pls note the lines are not as high as the divs

https://codepen.io/anon/pen/zzRXLM

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}

body {
  font-family: Roboto, Helvetica, Arial, Sans-Serif;
}

.container {
  display: flex;
  width:600px;
  margin-top:20px;
}

.child{  
  flex: 1;
  text-align: center;
  padding:0px 15px;
  border-right: 1.2px solid #ccc;
}

<div class="container">
  <div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </div>
  <div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </div>
    <div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </div>
</div>

Possible duplicate of [3 column layout HTML/CSS](https://stackoverflow.com/questions/20566660/3-column-layout-html-css) — Bobulous, Jun 30 '17 at 16:03
I think he is specifically talking about the borders not going all the way up to the div's height — Isac, Jun 30 '17 at 16:04

Fered · Accepted Answer · 2017-06-30T16:25:53.423

I would suggest using :after

.child{  
  flex: 1;
  text-align: center;
  padding:0px 15px;
  position:relative; /* add this */
}
.child:after {
    content: ' ';
    position: absolute;
    border-right: 1.2px solid #ccc;

    /* use one of these blocks */
    height: 80%;
    top: 10%;
    /* or 
    top:20px;
    bottom:20px;
    */
    right: 0;
}

/* use this rule if you dont want line for last div */
.child:last-child:after{
  display:none
}

https://codepen.io/FaridNaderi/pen/qjxGZd

hungerstar · Answer 2 · 2017-06-30T18:26:27.123

You can use a pseudo element like ::after and absolute position it within .child, make sure to set .child to relative positioning so the pseudo element remains inside of .child. Then adjust how far from the top or bottom you would like the border to start. I used px but a relative unit like % will work too.

body {
  font-family: Roboto, Helvetica, Arial, Sans-Serif;
}

.container {
  display: flex;
  width: 600px;
  margin-top: 20px;
}

.child{  
  flex: 1;
  text-align: center;
  padding: 0px 15px;
  position: relative;
}

.child::after {
  content: '';
  position: absolute;
  top: 15px;
  right: 0;
  bottom: 15px;
  border: 1px solid indianred;
}

<div class="container">

  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
  </div>
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
  </div>
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
  </div>

</div>

score 0 · Answer 3 · answered Jun 30 '17 at 16:05

0

Consider having a small png image of a line and use that to separate them. Then the line can be any length you desire. Then use the new CSS3 display:grid feature to create the three columns.

display: grid;
grid-template-columns: 75px 75px 75px;
grid-template-rows: 50px;

See here: https://gridbyexample.com/ for how to use display:grid.

answered Jun 30 '17 at 16:05

JasonG

127
1
8

A little bit too complicated maybe. – Paolo Jul 03 '17 at 07:58

Separate div with partial vertical lines with margins only

3 Answers3