Table layout example working 3

by lovromar

HTML

<div id="container"><div id="row">

  <div id="left">
      
      <div style="display: block; width: 64px;">aaaaa</div>
    
    </div>

  <div id="middle">
      <div style="float:left;width:100px;height:50px;background-color:green;">a</div>
      <div style="position:absolute;right:0;width:100px;height:50px;background-color:red;">a</div>
    
    </div>

  <div id="right"> 
      
      <div style="display: block; width: 64px;">aaaaa</div>
    
    </div>

  </div></div>

CSS

/* THE DIV TO TABLE TECHNIQUE */

  #container {
    width: 100%;
    padding:0;
    display: table;
    border: 1px solid black;
      /* table-layout: fixed; */
    }

  #row  {
    display: table-row;
    }

  #left {
  /*   width:150px; */
    padding:0;
    background: #EEF;
    display: table-cell;
    background-color:red;
      width:1px;
    }

  #right {
    width:1px;
    background:#FEE;
    display: table-cell;
    background-color:blue;
    }

  #middle {
    padding: 10px;
    width: 100%;
    background:yellow;
    display: table-cell;
      position:relative;
    }

    /* IE ONLY */
  * html #container {
    background:yellow url("red.gif") top left repeat-y;
    }
  * html #row {
    background:url("blue.gif") top right repeat-y;
    }
  * html #left {
    float:left;
    }
  * html #right {
    float:right;
    }
  * html #middle {
    float: left;
    }
  * html .cleaner {
    display:block;
    }