Bratish Goswami

Had an interesting CSS challenge recently - needed to make text that overflows from one div to seamlessly continue in another div, like in newspaper columns. This isn't straightforward with CSS alone.

Here's the problem and some solutions:

The Challenge:

<div class="column-1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...
</div>
<div class="column-2">
    <!-- Want overflow text to continue here -->
</div>

Solution 1: CSS3 Regions (experimental at the time)

.content-flow {
    flow-into: article-flow;
}

.column-1, .column-2 {
    flow-from: article-flow;
    height: 200px;
    width: 200px;
    float: left;
    margin-right: 20px;
}

Solution 2: JavaScript approach

function flowText() {
    var source = document.getElementById('source-text');
    var col1 = document.getElementById('col1');
    var col2 = document.getElementById('col2');
    
    var words = source.textContent.split(' ');
    var col1Text = '';
    var col2Text = '';
    
    // Fill first column
    for (var i = 0; i < words.length; i++) {
        col1Text += words[i] + ' ';
        col1.textContent = col1Text;
        
        if (col1.scrollHeight > col1.clientHeight) {
            // Remove last word from col1 and start col2
            col1Text = col1Text.replace(words[i] + ' ', '');
            col1.textContent = col1Text;
            col2Text = words.slice(i).join(' ');
            col2.textContent = col2Text;
            break;
        }
    }
}

Solution 3: Using CSS Multi-column (better browser support)

.multi-column {
    column-count: 2;
    column-gap: 20px;
    column-rule: 1px solid #ccc;
}

Solution 4: Flexbox approach for equal height columns

.container {
    display: flex;
    height: 400px;
}

.column {
    flex: 1;
    overflow: hidden;
    padding: 20px;
    margin-right: 20px;
}

Realistic solution (what I ended up using):

For most cases, CSS multi-column is the best approach:

.article-content {
    column-count: 2;
    column-gap: 30px;
    column-rule: 1px solid #ddd;
    text-align: justify;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .article-content {
        column-count: 1;
    }
}

Solution 5: Using CSS float and clear for column layout

.text-columns {
    overflow: hidden;
}

.text-columns p {
    float: left;
    width: 48%;
    margin-right: 4%;
}

.text-columns p:nth-child(even) {
    margin-right: 0;
}

Solution 6: Table-based approach (works in older browsers)

.column-table {
    display: table;
    width: 100%;
}

.column-cell {
    display: table-cell;
    width: 50%;
    padding: 0 10px;
    vertical-align: top;
}

Problems with pure CSS solutions:

• CSS Regions had limited browser support
• JavaScript solutions can be complex and performance-heavy
• Multi-column doesn't give you fine control over column breaks
• Float-based solutions work but can be tricky with dynamic content

For most real-world use cases, CSS multi-column is the way to go. It's well-supported and handles the text flow automatically. The table-cell approach is also solid for older browser support.