Trying to create proportional table with divs

Question

I'm trying to create a HTML page with a proportional table, using div elements only. I wish the left column to take 60% of the table width and have 3 rows. For the 2nd column I wish it to take the remaining 40% of the table's width, and have 4 rows, each row with 2 cells.

Here is my HTML markup: Why I only see the first (left) column?

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background-color: #DDDDDD;
}

#MasterDiv {
  display: table;
  height: 100%;
  width: 100%;
}

.left {
  display: table-column;
  width: 60%;
}

.right {
  display: table-column;
  width: 40%;
}

.A {
  height: 30%;
  display: table-row;
}

.B {
  height: 35%;
  display: table-row;
}

.B2 {
  height: 25%;
  display: table-row;
}

.C1 {
  display: table-cell;
  background: #ff00ff;
}

.C2 {
  display: table-cell;
  background: #ffffff;
}

.C3 {
  display: table-cell;
  background: #0000ff;
}

.C4 {
  display: table-cell;
  background: #ff0000;
}

.C5 {
  display: table-cell;
  background: #00ff00;
}

.C6 {
  display: table-cell;
  background: #000000;
}

TJ Hannington · Accepted Answer

you need to nest your rows and columns within the left and right divs. At the moment you're declaring left and right but have no content inside them and there's mix of table and div elements which can confuse things.

I've made a div only example of what you described above. The "row" divs on the left take up 100% and the 'split-columns' take up 50% of the "right" width. The height is based on content but if you want to specify you can do by adding an id or class.

.container {
  width: 100%;
  font-family: Helvetica, Sans-Serif;
}

.left,
.right,
.split-column {
  float: left;
  background-color: #f9f9f9;
}

.left {
  width: 60%;
}

.right {
  width: 40%;
}

.split-column {
  width: 50%;
  background-color: lightblue;
}

Trying to create proportional table with divs

Answers (2)

Related Questions