HTML Element Style How to - Create div Grid Layout by using display: table/table-cell

Question

We would like to know how to create div Grid Layout by using display: table/table-cell.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#columns {
  display: table;
  width: 500px;
}<!--   ww w . j  a  va2  s .c  o m-->

.col1 {
  display: table-cell;
  width: 65%;
  padding: 1em;
  position: relative;
  left: auto;
}

.col2 {
  width: 35%;
  display: table-cell;
  padding: 1em;
  position: relative;
}
</style>
</head>
<body>
  <div id="columns">
    <div class="col1">
      <div id="headerDiv1">
        <p>header div</p>
      </div>
      <div id="contentDiv1">
        <p>content div</p>
      </div>
      <div id="footerDiv1">
        <p>footer div</p>
      </div>
    </div>
    <div class="col2">
      <div id="hDiv2">
        <p>header div right side</p>
      </div>
      <div id="cDiv2">
        <p>content div right side</p>
      </div>
      <div id="fDiv2">
        <p>footer div right side</p>
      </div>
    </div>
  </div>
</body>
</html>

The code above is rendered as follows: