JSFiddle - React, Tailwind, and code Playground

HTML

<body>body (all divs may have some padding, some margin and some border. All divs adjust their height to their content.)
<div id="globalcontainer"><span class="important">#globalcontainer (fixed width, not really centered into body : see center)</span>
  <div id="header">#header (100%)</div>
<div id="middle">#middle (100%)
  <div id="left">
    <span class="important">#left (on the left of content, with a fixed min-width.<br>
     <br>
 Width adjusted to content if content &gt; min-width. <br>
<br>
      If left+right+center min-width &gt; global container width, then still adjusts its size to its content and goes outside globalcontainer limits.<br>
<br>
      Inner divs have variable (and unknown) width, sticked to the right)</span>
	  <br>
	  <DIV class="bloc" style="width:300px;">bloc</div>
	  <DIV class="bloc" style="width:50px;">bloc</div>
	  <DIV class="bloc" style="width:500px;">bloc</div>
  </div>
  <div id="center"><span class="important">#center (width adjusted to globalcontainer size - left size - right size, with a fixed min-width.<br>
      <br>
      Stays centered on the screen whatever the left or right size are<br>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --&gt; if left or right divs are not present in the HTML (or present with display:none), center div stays on the center of the screen)</span>
    <div id="center-middlerow">#center-middlerow (100%)
      <div id="pageReceiver">#pageReceiver (100%)
        <div id="page">#page (100%)<br>
          <div id="pageHeader">#pageHeader (100%)</div>
          <div id="pageContent">#pageContent (100%)</div>
        </div>
        <div id="tip" style="display: block;">#tip (under page)</div>
      </div>
      <div style="text-align:center" id="center-bottomrow">#center-bottomrow (100%)</div>
    </div>
    <div id="right"><span class="important">#right (on the right of content, with a fixed min-width.<br>
<br>
Width adjusted to content if content &gt; min-width. <br>
<br>
If left+right+center...

CSS

* {
	font-family:Arial;
	font-size:11px;
	border:1px solid black;
	padding:10px;
	
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	
	background-color:rgba(125,125,125,0.1); 
}

span {
	border:0px;
	padding:0px;
	background-color:transparent;
}

span.important {
	color:red;
	font-weight:bold;
}
html {
	border:0px;
	padding:0px;
	background-color:white;
}

BODY {
	padding:20px;
	padding-bottom:0px;
}

#globalcontainer, #left, #center, #right , #header, #footer {
	margin:auto;
	background-color:transparent;
	display:table;
}

/* ====================================================== */

#globalcontainer {
	min-width:1130px;
	max-width:1130px;
	width:100%;
	vertical-align:top;
}

#header {
	margin-bottom:10px;
	vertical-align:top;
	width:100%;
}

#middle {
	display: table;
	vertical-align:top;
}

#footer {
	margin-top:10px;
	vertical-align:top;
	text-align:center;
	width:100%;
}

/* ====================================================== */

#left {
	vertical-align:top;
	float:left;
	padding-right:20px;
}

#center {
	vertical-align:top;
	display: table-cell;
	width:100%;
}

#center-toprow {
	padding:10px;
	padding-top:0px;
}

#center-middlerow {
}

#center-bottomrow {
	padding:5px;
	margin-top:30px;
}

#right {
	vertical-align:top;
	float:right;
	padding-left:20px;
}


#left DIV.bloc {
	float:right;
	white-space:nowrap;
}

#right DIV.bloc {
	float:left;
	white-space:nowrap;
}

/* ====================================================== */

#pageReceiver {
	margin:auto;
	width:100%;
}

#page {
	cursor:default;
	background-color:#F8F8F8;
	border:1px solid black;
	padding:20px;
	width:100%;
	position:relative;
	min-height:591px;
}

#pageHeader {
	margin:auto;
	margin-bottom:15px;
	
	display: -moz-inline-stack;
    display: inline-block;
	*display: inline;
}

#tip {
	margin-top:5px;
	margin-left:20px;
	margin-right:20px;
	padding:5px;
	background-color:transparent;
	
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius:...