JSFiddle - React, Tailwind, and code Playground

by bgrins

HTML

<script src="https://raw.github.com/bgrins/loremjs/master/lorem.js"></script>
<h1>3 Column Fluid CSS Layout</h1>

<div class='col-container'>
    <div class='col-left-faux'></div>
    <div class='col-right-faux'></div>
    
    <div class='col-left' data-lorem='1'></div>
    <div class='col-middle' data-lorem='1'></div>
    <div class='col-right'></div>
        
</div>

CSS

.col-container {
    position:relative;  
    min-width: 500px;  
    background: #ccc;
}

.col-container:before, .col-container:after { content: ""; display: table; }
.col-container:after { clear: both; }
.col-container{ *zoom: 1; }

.col-middle {
    margin-left: 100px;
    margin-right: 200px;
    padding: 10px;
}

.col-left, .col-left-faux {
    background: #fcf;
    float: left;
    width: 100px;
}
.col-left-faux {
    position:absolute;
    top: 0; bottom: 0; left: 0;
    float: none;   
    z-index: -1;
}

.col-right, .col-right-faux {
    background: #cfc;
    float: right;
    width: 200px;
}

.col-right-faux {
    position:absolute;
    top: 0; bottom: 0; right: 0;
    float: none; 
}