<!DOCTYPE html>
<style>
.mc { box-sizing:border-box; padding:0 5px; }
.column { float:left; width:calc(50% - 8px); height:100%; }
.gap { float:left; width:16px; height:100%; }
.outer { background:lime; }
.middle { background:salmon; }
.inner { background:papayawhip; }
.outer > .gap::before { display:block; margin:auto; border-left:8px solid; width:0; height:100%; content:""; }
.middle > .gap::before { display:block; margin:auto; border-left:4px solid; width:0; height:100%; content:""; }
.inner > .gap::before { display:block; margin:auto; border-left:2px solid; width:0; height:100%; content:""; }
</style>
<p>Below there should be a multicol inside a multicol inside a multicol.</p>
<p>The innermost multicol (papayawhip, thin column rules) should have a total of eight columns and
consist of twelve lines. Each line should have a letter, from A to L, ascendingly.</p>
<p>The middle multicol (salmon, medium column rules) should have four columns. The first line in the
first line should say "middle first". Then comes the inner multicol, followed by the last line
in the last column, which should say "middle last".</p>
<p>The outermost multicol (lime, thick column rules) should have two columns. The first line in the
first column should say "outer first". Then comes the middle (and inner) multicol, followed by
the last line in the last column, which should say "outer last".</p>
<p>Rules should be drawn between columns in the same row.</p>
<div style="line-height:2em; width:572px;">
<div class="mc outer" style="height:6em;">
<div class="column">
outer first
<div class="mc middle" style="height:4em;">
<div class="column">
middle first
<div class="mc inner" style="height:2em;">
<div class="column">
A<br>
</div>
<div class="gap"></div>
<div class="column">
B<br>
</div>
</div>
</div>
<div class="gap"></div>
<div class="column">
<div class="mc inner" style="height:4em;">
<div class="column">
C<br>
D<br>
</div>
<div class="gap"></div>
<div class="column">
E<br>
F<br>
</div>
</div>
</div>
</div>
</div>
<div class="gap"></div>
<div class="column">
<div class="mc middle" style="height:4em;">
<div class="column">
<div class="mc inner" style="height:4em;">
<div class="column">
G<br>
H<br>
</div>
<div class="gap"></div>
<div class="column">
I<br>
J<br>
</div>
</div>
</div>
<div class="gap"></div>
<div class="column">
<div class="mc inner" style="height:2em;">
<div class="column">
K<br>
</div>
<div class="gap"></div>
<div class="column">
L<br>
</div>
</div>
middle last
</div>
</div>
outer last
</div>
</div>
</div>
Codebase Browser
chromium