colonnes veritables ou factice ?

dabblet.css

/* colonnes veritables ou factice ? */
/* bases avec col2 fluide*/
div {border:solid;margin:10px;}
div > div {box-shadow:0 0 5px black;border-radius:5px;}
div div:hover {height:100px;}
.colonnes {width:40%;min-width:350px;margin:1em;display:inline-block;vertical-align:top;}
.col1 {width:200px;}
.col2 {width:auto;overflow:auto;}
/* BG et float , colonnes factices classique */
.bg .col1 {float:left;}
.bg {overflow:auto;background:url(http://dummyimage.com/222x1/8084bd/8084bd.jpg) repeat-y, url(http://dummyimage.com/110x1/80bdbc/80bdbc.jpg);}
/* display:table; ou inline-table*/
.table {display:inline-table;border-spacing:10px;}
.table > div {display:table-cell;background:yellow}

/* pseudo comme cache */
.pseudo > div {border:transparent solid;}
.pseudo .col1 {float:left;}
.pseudo {position:relative;background:#159;}
.pseudo:before {content:'';width:10px;border-left:solid;border-right:solid;
position:absolute;top:-3px;bottom:-3px;z-index:1;left:212px;background:white;}
.pseudo:after {content:'';clear:both;display:block;}
/* variante colonnes factices avec linear gradient */
.gradient .col1 {float:left;}
.gradient > div {border-color:transparent}
.gradient {overflow:auto;
/* gradient CSS */
background-color:yellow;
background-image:linear-gradient(90deg,#8084bd 0, #8084bd 212px,black 212px, black 215px, transparent 215px, transparent 225px, black 225px, black 228px,#80bdbc 228px, #80bdbc );
}
html {text-align:center;}

dabblet.html

<p>Redimensionner la fenêtre de votre navigateur et passer la souris sur les 'Col1' ou 'Col2'</p>
<div class="colonnes bg"><div class="col1">Col 1 </div><div class="col2">Col 2 </div></div>
<div class="colonnes table"><div class="col1">Col 1 </div><div class="col2">Col 2 </div></div>
<div class="colonnes pseudo"><div class="col1">Col 1 </div><div class="col2">Col 2 </div></div>
<div class="colonnes gradient"><div class="col1">Col 1 </div><div class="col2">Col 2 </div></div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}