<div class="contain vert-divider">
  <div class="column">
    <h1>Vertical Dividers</h1>
    <p>A simple example of css dividers between columns on a grid system. Please feel free to take this code and adapt it to the grid system of your liking.</p>
  </div>
</div>

<div class="contain vert-divider">
  <div class="column one-third">
    <h3>Title</h3>
    <p>
      <ul>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
      </ul>
    </p>
  </div>
  <div class="column one-third">
    <h3>Title</h3>
    <p>      <ul>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
      </ul>
    </p>
  </div>
  
  <div class="column one-third">
    <h3>Title</h3>
    <p>      
    <ul>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
      </ul>
    </p>
  </div>
  
  <div class="column one-third">
    <h3>Title</h3>
    <p>      
    <ul>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
      </ul>
    </p>
  </div>
  
  <div class="column one-third">
    <h3>Title</h3>
    <p>      
    <ul>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
      </ul>
    </p>
  </div>
  
  <div class="column one-third">
    <h3>Title</h3>
    <p>
            <ul>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
        <li>0</li>
      </ul>
    </p>
  </div>

  
</div>
  
/*
CONTAINERS / DIVIDERS
*/

.vert-divider{
	clear: both;
	position: relative;
}

.vert-divider:after {
	clear: both;
	content: " ";
	display: block;
	height: 0;
	visibility: hidden;
}

.vert-divider .column:not(:first-child):after, .vert-divider .columns:not(:first-child):after{
	background: #DDDDDD;
	bottom: 0;
	content: " ";
	margin-left: -10px;
	position: absolute;
	top: 0;
	width: 1px;
}


.contain { position: relative; width: 960px; margin: 20px auto; padding: 0; 
}

.contain .column, .contain .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; 
border-bottom: 1px solid #e2e2e2;
}

.contain .one-third.column { width: 300px; 
}

.contain .two-thirds.column { width: 620px; }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.