Column Borders

CSS trick to create borders with extra control

by psayre23

HTML

<h3>Growing Border</h3>

<button id="newcol">New Column</button>

<div class="column-wrapper">
    <div class="column" contenteditable>
        Bacon ipsum dolor sit amet pork loin short ribs chuck strip steak, venison meatloaf tri-tip bacon pork ground round frankfurter sausage leberkas.
    </div>
    <div class="column" contenteditable>
        Polaroid minim mixtape, DIY officia pour-over umami. Reprehenderit gastropub dreamcatcher, brooklyn gluten-free cred tempor jean shorts cillum assumenda delectus.    
    </div>          
</div>

<p>Above are two columns with <code>contenteditable</code> enabled. Try changing the contents and notice what happens with the border. The border is anchored to the wrapper, not the individual columns. So when the wrapper grows, the border grows; it doesn't matter which column is larger.</p>

CSS

/* Column style */
.column-wrapper {
    position: relative;
    overflow: hidden;
    background: #ddd;
}
.column {
    box-sizing: border-box;
    width: 100%;
    float: left;
    padding: 1em;
    text-align: justify;
    font: 14px/24px Arial;
}

/* Border style */
.column:after {
    content: '';
    position: absolute;
    display: block;
    top: 1em;
    bottom: 1em;
    border-left: 1px dashed #000;
    margin-left: -1em;
}
.column:first-child:after {
    display: none;
}

/* Dynamic column sizings */
.column:first-child:nth-last-child(2), .column:first-child:nth-last-child(2) ~ * { width: 50%; }
.column:first-child:nth-last-child(3), .column:first-child:nth-last-child(3) ~ * { width: 33.33%; }
.column:first-child:nth-last-child(4), .column:first-child:nth-last-child(4) ~ * { width: 25%; }
.column:first-child:nth-last-child(5), .column:first-child:nth-last-child(5) ~ * { width: 20%; }
.column:first-child:nth-last-child(6), .column:first-child:nth-last-child(6) ~ * { width: 16.66%; }
.column:first-child:nth-last-child(7), .column:first-child:nth-last-child(7) ~ * { width: 14.27%; }
.column:first-child:nth-last-child(8), .column:first-child:nth-last-child(8) ~ * { width: 12.5%; }

JavaScript

$('#newcol').on('click', function () {
    $('.column:last').clone().appendTo('.column-wrapper');
});