JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container container_16">
<div class="grid_1">
<p>this left bar should be fixed by min-width, max-width</p>
</div>
<div class="grid_14">
<p>this content block should be fluid and maxed to center</p>
</div>
<div class="grid_1">
<p>this right bar should be fixed by min-width, max-width</p>
</div>
<div class="clear"> </div>
</div>
CSS
body {
background-color: white;
padding:0px;
margin:0px;
}
.container {
background-color:#ccc;
}
.container div p {
background-color: white;
}
div p {
border:1px solid black;
padding:10px;
}
/* Containers
----------------------------------------------------------------------------------------------------*/
.container_16 {
width: 100%;
overflow:auto;
}
/* Grid >> Global
----------------------------------------------------------------------------------------------------*/
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16 {
display:block;
float: left;
position: relative;
margin-left: 1%;
margin-right: 1%;
}
/* Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/
.alpha {
margin-left: 0;
}
.omega {
margin-right: 0;
}
/* Grid >> 16 Columns
----------------------------------------------------------------------------------------------------*/
.container_16 .grid_1 {
#width:4.25%;
min-width:100px;
max-width:100px;
}
.container_16 .grid_2 {
width:10.5%;
}
.container_16 .grid_3 {
width:16.75%;
}
.container_16 .grid_4 {
width:23.0%;
}
.container_16 .grid_5 {
width:29.25%;
}
.container_16 .grid_6 {
width:35.5%;
}
.container_16 .grid_7 {
width:41.75%;
}
.container_16 .grid_8 {
width:48.0%;
}
.container_16 .grid_9 {
width:54.25%;
}
.container_16 .grid_10 {
width:60.5%;
}
.container_16 .grid_11 {
width:66.75%;
}
.container_16 .grid_12 {
width:73.0%;
}
.container_16 .grid_13 {
width:79.25%;
}
.container_16 .grid_14 {
width:85%;
}
.container_16 .grid_15 {
width:91.75%;
}
.container_16 .grid_16 {
width:98.0%;
}
/* Prefix Extra Space >> 16...