<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; }
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.