Vertical Dividers between Columns

index.html

<div class="container vertical-divider">
  <div class="column one-third">
    <h1>Vertical Dividers</h1>
  </div>
  <div class="column two-thirds">
    <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="container vertical-divider">
  <div class="column one-third">
    <h3>Lots of Text</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet vestibulum libero. Proin semper sapien et odio mattis ornare vel ac metus. Fusce venenatis risus a justo vestibulum, eu efficitur ipsum ornare. Duis turpis lectus, laoreet ut gravida sit amet, imperdiet et nunc. Curabitur volutpat ultrices erat, et tempus dolor sodales at. In porttitor nisi et magna facilisis pulvinar. Sed aliquam nisl in nisl mattis, eu consectetur sem condimentum.</p>
  </div>
  <div class="column one-third">
    <h3>Not as much Text</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet vestibulum libero. Proin semper sapien et odio mattis ornare vel ac metus. Fusce venenatis risus a justo vestibulum, eu efficitur ipsum ornare.</p>
  </div>
  <div class="column one-third">
    <h3>Very Little Text</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet vestibulum libero.</p>
  </div>
</div>

style.css

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

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

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

/* Very simple grid for example */
.container { position: relative; width: 960px; margin: 20px auto; padding: 0; }

.container .column, .container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }

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

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

Vertical Dividers between Columns.markdown

Vertical Dividers between Columns

Simple css vertical dividers you can easily adapt to the grid system of your liking.

Forked from Phil Hoyt's Pen Vertical Dividers between Columns.

A Pen by Captain Anonymous on CodePen.

License.