positioning/table_like_divs.html

<!DOCTYPE html>
<html>
<head>

  <title>3 horizontal divs</title>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

   <!--{--><style type='text/css'>

     body {
       margin: 0;
       height:10000px;
       background-color: #112;
     }

    #main{
        position     :fixed;
        display      :table;
        width        :100%;
        top          : 10%;
        margin-bottom:100px;
        height       : 50%;
    }

    #row{
        display:table-row;
    }

    #row div{
        display:table-cell;
        width: 33%;
    }
    
    #left {
        background:#f70;
    }

    #middle {
        background:#31a;
        width:33%;
        margin:auto;
    }

    #right {
        width: 33%;
        background:#feb;
    }

   </style><!--}-->
  

</head>
<body>

<div id='main'>
    <div id='row'>
        <div id='left'  ></div>
        <div id='middle'></div>
        <div id='right' ></div>
    </div>
</div>


</body>
</html>