Draw a Static Line Between Two Divs

Draw a static line between two divs

if it stands on 1 line, you could add pseudo element and filter first and last box, to draw or not a line aside.

div.boxItem { 

  display: inline-block;

  border: 1px solid black;

  padding: 1em;  

  margin-right: 5em;

  position:relative

}

.boxItem:before,

.boxItem:after

{

  content:'';

  width:5em;/* size of your margin */

  border-bottom:1px solid;

  position:absolute;

  top:50%;

}

:after {

  left:100%;

}

:before {

  right:100%;

}

.boxItem:first-of-type:before,

.boxItem:last-of-type:after {

  display:none;

}

.myBox {

  white-space:nowrap; 

/* */ text-align:center;

  }

body {

}

<div class="myBox">

  <div class="boxItem">1</div>

  <div class="boxItem">2</div>

  <div class="boxItem">3</div>

  <div class="boxItem">4</div>

</div>

<div class="myBox">

  <div class="boxItem">1</div>

  <div class="boxItem">2</div>

  <div class="boxItem">3</div>

</div>

<div class="myBox">

  <div class="boxItem">1</div>

  <div class="boxItem">2</div>

</div>

<div class="myBox">

  <div class="boxItem">1</div>

</div>

Seperator line between two divs

To achieve this, I used border-left and border-right on the .center elements, I also collated the common properties of the .column-left, .column-right, and column-center elements together:

.column-left,
.column-right,
.column-center {
  width: 33.333333%;
  height: auto;
  /* causes the padding, and borders, to be included in the calculated
     width of the elements: */
  box-sizing: border-box;
  /* setting padding for the elements top, right, bottom, left: */
  padding: 0 0.5em 20px 0.5em;
  // setting the border for all elements: */
  border: 1px solid transparent;
}
.column-center {
  display: inline-block;
  /* overriding the transparent colour for the left and right borders: */
  border-left-color: #aaa;
  border-right-color: #aaa;
}

.container-col {

  height: auto;

  display: table;

  margin-bottom: 20px;

}

.column-left,

.column-right,

.column-center {

  width: 33.333333%;

  height: auto;

  box-sizing: border-box;

  padding: 0 0.5em 20px 0.5em;

  border: 1px solid transparent;

}

.column-left {

  float: left;

}

.column-right {

  float: right;

}

.column-center {

  display: inline-block;

  border-left-color: #aaa;

  border-right-color: #aaa;

}

.top-div {

  height: auto;

}

.bottom-div {

  line-height: 18px;

  height: auto;

}

.bottom-div h5 {

  margin-top: 0px;

  margin-bottom: 10px;

  text-align: center;

}

.top-div img {

  width: 100%;

  height: auto;

}

.game-table {

  border-top: 1px dotted #aaa;

  margin-bottom: 10px;

}

.game-item {

  padding: 8px 0px;

  border-bottom: 1px dotted #aaa;

  height: auto;

}

.game-home {

  float: left;

  width: 44%;

  margin-right: 2%;

  text-align: right;

}

.game-vs {

  width: 8%;

  margin-right: 2%;

  display: inline-block;

  text-align: center;

}

.game-away {

  float: right;

  width: 44%;

  text-align: left;

}

<br>

<div class="container-col">

  <div></div>

  <div class="column-center">

    <div class="top-div">

      <img src="http://static.squarespace.com/static/523ce201e4b0cd883dbb8bbf/t/53bf2302e4b06e125c374401/1405035267633/profile-icon.png"></img>

    </div>

    <div class="bottom-div">

      <h5>headline</h5>

      <div class="game-table">

        <div class="game-item">

          <div class="game-home">home Team</div>

          <div class="game-vs">Vs.</div>

          <div class="game-away">away team</div>

        </div>

      </div>Nibh voluptua eleifend sed ne, ex melius maiorum vix, ea case percipit sit. Quo in scripta prodesset, ex nam sonet theophrastus. Read More ...</div>

  </div>

  <div class="column-left">

    <div class="top-div">

      <img src="http://static.squarespace.com/static/523ce201e4b0cd883dbb8bbf/t/53bf2302e4b06e125c374401/1405035267633/profile-icon.png"></img>

    </div>

    <div class="bottom-div">

      <h5>headline</h5>

      <div class="game-table">

        <div class="game-item">

          <div class="game-home">home Team</div>

          <div class="game-vs">Vs.</div>

          <div class="game-away">away team</div>

        </div>

      </div>Nibh voluptua eleifend sed ne, ex melius maiorum vix, ea case percipit sit. Quo in scripta prodesset, ex nam sonet theophrastus. Read More ...</div>

  </div>

  <div class="column-right">

    <div class="top-div">

      <img src="http://static.squarespace.com/static/523ce201e4b0cd883dbb8bbf/t/53bf2302e4b06e125c374401/1405035267633/profile-icon.png"></img>

    </div>

    <div class="bottom-div">

      <h5>headline</h5>

      <div class="game-table">

        <div class="game-item">

          <div class="game-home">home Team</div>

          <div class="game-vs">Vs.</div>

          <div class="game-away">away team</div>

        </div>

      </div>Nibh voluptua eleifend sed ne, ex melius maiorum vix, ea case percipit sit. Quo in scripta prodesset, ex nam sonet theophrastus. Read More ...</div>

  </div>

</div>

Draw an arrow between two divs

You might consider SVG.

Sample Image

In particular, you can use a line with a marker-end shaped with an arrow-path.

Be sure to set orient=auto so the arrowhead will be rotated to match the slope of the line.

Since SVG is a DOM element, you can control the start/end position of the line in javascript.

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/9aCsJ/

<svg width="300" height="100">

    <defs>
        <marker id="arrow" markerWidth="13" markerHeight="13" refx="2" refy="6" orient="auto">
            <path d="M2,2 L2,11 L10,6 L2,2" style="fill:red;" />
        </marker>
    </defs>

    <path d="M30,150 L100,50"
          style="stroke:red; stroke-width: 1.25px; fill: none;
                 marker-end: url(#arrow);"
    />

</svg>

How to create lines between span elements- CSS/HTML

Try this one:

.circle {

  height: 30px;

  width: 30px;

  background-color: #bbb;

  border-radius: 50%;

  float: left;

  margin: 0px;

  padding: 0px;

}

.line{

  height: 2px;

  width: 40px;

  background-color: #bbb;

  float: left;

  margin: 14px 0px;

  padding: 0px;

}

.clear{

  clear: both;

}

<div>

  <span class="circle"></span>

  <span class="line"></span>

  <span class="circle"></span>

  <span class="line"></span>

  <span class="circle"></span>

  <span class="line"></span>

  <span class="circle"></span>

  <span class="clear"></span>

</div>

Draw a Static Line Between Two Divs