Table layout example working

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 class="column-in">
    <h4>Middle Col</h4>
    <p id="mccont">
      Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum rutrum,
urna eget gravida auctor, mauris neque tempus lorem, non condimentum
sem purus et eros. Donec non lectus. Phasellus eu massa. Praesent felis
metus, tempor a, vehicula ut, interdum id, libero. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Cras nec est. Nulla facilisi.
Integer a dolor. Duis vitae diam. Morbi laoreet tellus ut diam.
Vestibulum lacinia congue nunc.
    </p>
  </div></div>

  <div id="right"><div class="column-in">
    <h4>Right Col</h4>
    <p id="rccont">
      Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum rutrum,
urna eget gravida auctor, mauris neque tempus lorem, non condimentum
sem purus et eros. Donec non lectus. Phasellus eu massa. Praesent felis
metus, tempor a, vehicula ut, interdum id, libero. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Cras nec est. Nulla facilisi.
Integer a dolor. Duis vitae diam. Morbi laoreet tellus ut diam.
Vestibulum lacinia congue nunc.
    </p>
  </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:150px;
    background:#FEE;
    display: table-cell;
    background-color:blue;
    }

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

    /* 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;
    }